CN117472485A - 一种界面显示的方法以及电子设备 - Google Patents

一种界面显示的方法以及电子设备 Download PDF

Info

Publication number
CN117472485A
CN117472485A CN202210871034.2A CN202210871034A CN117472485A CN 117472485 A CN117472485 A CN 117472485A CN 202210871034 A CN202210871034 A CN 202210871034A CN 117472485 A CN117472485 A CN 117472485A
Authority
CN
China
Prior art keywords
interface element
interface
application icon
electronic device
distance
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.)
Pending
Application number
CN202210871034.2A
Other languages
English (en)
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 CN202210871034.2A priority Critical patent/CN117472485A/zh
Priority to PCT/CN2023/107682 priority patent/WO2024017185A1/zh
Publication of CN117472485A publication Critical patent/CN117472485A/zh
Pending legal-status Critical Current

Links

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/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/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
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种界面显示的方法以及电子设备，该方法包括：显示第一界面，所述第一界面包括M个界面元素，M＞1且为整数；检测到用户的操作，确定第一界面元素；根据所述第一界面元素的类型，确定N个受到第一界面元素影响的界面元素，所述N个受到第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M‑1，且为整数；根据第一联动参数，确定所述第二界面元素的第一动画效果；根据所述第一动画效果移动所述第二界面元素，通过本申请，使得界面元素之间存在关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。

Description

一种界面显示的方法以及电子设备
技术领域
本申请涉及电子设备领域，并且更具体地，涉及一种界面显示的方法以及电子设备。
背景技术
随着技术的进步，各种类型的电子设备配置有各种类型的屏幕，其中界面中各种界面元素的显示效果是影响用户体验的重要因素。目前动画的显示效果十分单一，用户缺乏真实的感受。
发明内容
本申请实施例提供一种界面显示的方法以及电子设备，使得界面元素之间存在关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
第一方面，提供了一种界面显示方法，该方法包括：显示第一界面，该第一界面包括M个界面元素，M＞1且为整数；检测到用户的操作，确定第一界面元素；根据该第一界面元素的类型，确定N个受到该第一界面元素影响的界面元素，该N个受到该第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M-1，且为整数；根据第一联动参数，确定该第二界面元素的第一动画效果，其中该第一联动参数包括该以下中的至少一项：该第一界面元素的尺寸、该第二界面元素的尺寸、该第一界面元素与该第二界面元素之间的距离、该第二界面元素的限制参数，该第一界面元素的动画效果；根据该第一动画效果移动该第二界面元素。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时或确定为产生引力影响的界面元素时，可以与其他界面元素关联，使得其他界面元素发生联动，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
结合第一方面，在第一方面的某些实现方式中，该检测到用户的操作，确定第一界面元素，包括：检测到用户针对该M个界面元素中的任意一个界面元素的操作，将该任意一个界面元素确定为该第一界面元素。
结合第一方面，在第一方面的某些实现方式中，该检测到用户的操作，确定第一界面元素，包括：检测到用户的手势操作，根据该M个界面元素的每一个界面元素的类型确定第一界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的层级，确定N个与该第一界面元素层级相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：根据该第一界面元素的层级确定第三界面元素，其中，该第三界面元素的层级与该第一界面元素的层级不相同；根据第二联动参数，确定该第三界面元素的第二动画效果，其中该第二联动参数包括该以下中的至少一项：该第一界面元素的尺寸、该第三界面元素的尺寸、该第一界面元素与该第三界面元素之间的距离、第三界面元素的限制参数、该第一界面元素的动画效果；根据该第二动画效果移动该第三界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的颜色，确定N个与该第一界面元素颜色相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的尺寸，确定N个与该第一界面元素尺寸相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素与M-1个界面元素之间的距离，并根据该第一界面元素与该M-1个界面元素之间的距离确定N个与所述第一界面元素类型相同的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的发生中心点，并根据发生中心点确定第一几何区域，将该第一几何区域包覆和/或与第一几何区域的边界相交的N个界面元素确定为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：将该第一界面中除该第一界面元素以外的N个界面元素确定为受到该第一界面元素影响的界面元素，N＝m-1。
结合第一方面，在第一方面的某些实现方式中，若该操作为移动操作，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的移动的第一方向；根据该第一方向确定N个在该第一界面元素的第一方向的界面元素为受到该第一界面元素影响的界面元素；或根据第二方向确定N个在该第一界面元素的第二方向的界面元素为受到该第一界面元素影响的界面元素，其中该第二方向为该第一方向的相反方向。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的发生中心点；根据该发生中心点，确定第一几何区域，将该第一几何区域覆盖或与该第一几何区域的边界相交的界面元素确定为该N个与该第一界面元素类型相同的界面元素。
结合第一方面，在第一方面的某些实现方式中，若该操作为按压操作或点击操作，该方法还包括：响应于该操作，改变该第一界面元素的尺寸。
结合第一方面，在第一方面的某些实现方式中，该第一联动参数还包括该用户执行该操作的压力。
结合第一方面，在第一方面的某些实现方式中，在该根据该效果移动该第二界面元素之前，该方法还包括：确定第一延迟时间；该根据该第一动画效果移动该第二界面元素，包括：在经过该第一延迟时间后，根据该第一动画效果移动该第二界面元素。
结合第一方面，在第一方面的某些实现方式中，该确定第一延迟时间，包括：根据该第一界面元素和该第二界面元素之间的距离确定该第一延迟时间。
结合第一方面，在第一方面的某些实现方式中，该第一延迟时间是预配置的。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：
该第二界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线，其中，该弹性力曲线包括临界阻尼弹性力曲线、过阻尼弹性力曲线、欠阻尼弹性力曲线。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：
若检测到该电子设备的类型由第一类型变为第二类型或该电子设备的屏幕参数发生变化，将该第一动画效果切换为第三动画效果；该根据该第一动画效果移动该第二界面元素，包括：根据该第三动画效果移动该第二界面元素。
第二方面，为本申请实施例的一种电子设备，所述电子设备包括执行上述方面或者上述方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。
第三方面，为本申请实施例的一种芯片，所述芯片与电子设备中的存储器耦合，用于调用存储器中存储的计算机程序并执行本申请实施例上述方面及其上述方面任一可能设计的技术方案；本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。
第四方面，为本申请实施例的一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得所述电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
第五方面，为本申请实施例的一种计算机程序，所述计算机程序包括指令，当所述指令在计算机上运行时，使得所述计算机执行如上述方面及其上述方面任一可能设计的技术方案。
第六方面，为本申请实施例的一种电子设备上的图形用户界面，所述电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，所述一个或多个处理器用于执行存储在所述一个或多个存储器中的一个或多个计算机程序，所述图形用户界面包括所述电子设备执行上述方面及其上述方面任一可能设计的技术方案时显示的图形用户界面。
第七方面，为本申请实施例的一种电子设备，该电子设备包括一个或多个处理器；一个或多个存储器；该一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
其中，第二方面至第七方面的有益效果，请参见上述方面的有益效果，不重复赘述。
附图说明
图1是本申请实施例提供的一种电子设备的结构示意图。
图2是本申请实施例提供的一例电子设备的软件结构框图。
图3是本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。
图4是本申请实施例提供的一组GUI。
图5是本申请实施例提供的界面元素受到***作的界面元素的“引力”影响而移动的动画效果细节示意图。
图6是本申请实施例提供的一组GUI。
图7是本申请实施例中提供的几种确定受到产生“引力”的界面元素的“引力”范围的方式的示意图。
图8是本申请实施例提供的摩擦力对于联动动画效果的影响的示意图。
图9是本申请实施例提供的压力对于联动动画效果的影响的示意图。
图10是本申请实施例提供的移动方向对于联动动画效果的影响的示意图。
图11是本申请实施例提供的不同影响因素对于联动动画效果的影响的示意图。
图12是本申请实施例的联动动画效果的动画过程和相关控制逻辑的示意图。
图13是本申请实施例的位移时间曲线的示意图。
图14是本申请实施例提供的一组GUI。
图15是本申请实施例提供的一组GUI。
图16是本申请实施例提供的一组GUI。
图17是本申请实施例提供的一组GUI。
图18是本申请实施例提供的一组GUI。
图19是本申请实施例提供的一组GUI。
图20是本申请实施例提供的一组GUI。
图21是本申请实施例提供的一组GUI。
图22是本申请实施例的联动动画效果相关联的联动框架与界面之间的关系的示意图。
图23是本申请实施例的用于实现动画效果能力或功能的***框架的示意图。
图24是本申请实施例的联动动画效果能力或功能实现的三种方式的具体说明的示意图。
图25是本申请实施例提供的界面显示方法的示意性流程图。
具体实施方式
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载 或者其它操作***的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。
示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，指南针190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的部件，也可以集成在一个或多个处理器中。在一些实施例中，电子设备100也可以包括一个或多个处理器110。其中，控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。在其他一些实施例中，处理器110中还可以设置存储器，用于存储指令和数据。示例性地，处理器110中的存储器可以为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。这样就避免了重复存取，减少了处理器110的等待时间，因而提高了电子设备100处理数据或执行指令的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路间(inter-integrated circuit，I2C)接口，集成电路间音频(nter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，SIM卡接口，和/或USB接口等。其中，USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与***设备之间传输数据。该USB接口130也可以用于连接耳机，通过耳机播放音频。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，WiFi)网络)，蓝牙(bluetooth，BT)，全球导航卫星***(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像、视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emittingdiode，OLED)、有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode，AMOLED)、柔性发光二极管(flex light-emittingdiode，FLED)、Miniled、MicroLed、Micro-oLed、量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或多个显示屏194。
在本申请的一些实施例中，当显示面板采用OLED、AMOLED、FLED等材料时，上述图1中的显示屏194可以被弯折。这里，上述显示屏194可以被弯折是指显示屏可以在任意部位被弯折到任意角度，并可以在该角度保持，例如，显示屏194可以从中部左右对折。也可以从中部上下对折。
电子设备100的显示屏194可以是一种柔性屏，目前，柔性屏以其独特的特性和巨大的潜力而备受关注。柔性屏相对于传统屏幕而言，具有柔韧性强和可弯曲的特点，可以给用户提供基于可弯折特性的新交互方式，可以满足用户对于电子设备的更多需求。对于配置有可折叠显示屏的电子设备而言，电子设备上的可折叠显示屏可以随时在折叠形态下的小屏和展开形态下大屏之间切换。因此，用户在配置有可折叠显示屏的电子设备上使用分屏功能，也越来越频繁。
电子设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点、亮度、肤色进行算法优化。ISP还可以对拍摄场景的曝光、色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或多个摄像头193。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备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可以用于存储一个或多个计算机程序，该一个或多个计算机程序包括指令。处理器110可以通过运行存储在内部存储器121的上述指令，从而使得电子设备100执行本申请一些实施例中所提供的方法，以及各种应用以及数据处理等。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作***；该存储程序区还可以存储一个或多个应用(比如图库、联系人等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如照片，联系人等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如一个或多个磁盘存储部件，闪存部件，通用闪存存储器(universal flash storage，UFS)等。在一些实施例中，处理器110可以通过运行存储在内部存储器121的指令，和/或存储在设置于处理器110中的存储器的指令，来使得电子设备100执行本申请实施例中所提供的方法，以及其他应用及数据处理。电子设备100可以通过音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、以及应用处理器等实现音频功能。例如音乐播放、录音等。
传感器模块180可以包括压力传感器180A、陀螺仪传感器180B、气压传感器180C、磁传感器180D、加速度传感器180E、距离传感器180F、接近光传感器180G、指纹传感器180H、温度传感器180J、触摸传感器180K、环境光传感器180L、骨传导传感器180M等。
其中，压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即X、Y和Z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android***分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和***库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，应用程序包可以包括相机、图库、日历、通话、地图、导航、WLAN、蓝牙、音乐、视频、短信息、广告模块和管理模块等。
其中，广告模块，用于与用户进行广告交互。该广告模块可以是操作***预置的模块，该广告模块和电子设备可以由同一生产商提供。
管理模块，用于根据广告主ID和设备ID生成OPENID，该管理模块可以是操作***预置的模块，该管理模块和电子设备可以由同一生产商提供。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架，应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器、内容提供器、视图***、电话管理器、资源管理器、通知管理器等。
窗口管理器用于管理窗口程序，窗口管理器可以获取显示屏大小，判断是否有状态栏、锁定屏幕、截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、电话簿等。
视图***包括可视控件，例如显示文字的控件，显示图片的控件等。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图片、布局文件、视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在***顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息、发出提示音、电子设备振动、指示灯闪烁等。
***库可以包括多个功能模块。例如：表面管理器(surface manager)、媒体库(media libraries)、三维图形处理库(例如：OpenGL ES)、2D图形引擎(例如：SGL)等。
表面管理器用于对显示子***进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频、视频格式回放和录制以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4、H.264、MP3、AAC、AMR、JPG和PNG等。
三维图形处理库用于实现三维图形绘图、图像渲染、合成和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动、摄像头驱动、音频驱动、传感器驱动。
在移动操作***中(例如Android、鸿蒙、iOS等)，动画的本质是基于刷新率实时显示界面或界面元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。但是目前的动画仅仅是简单的动画效果的组合，动画效果单一，不符合物理规律，没有考虑真实使用场景和用户使用习惯。界面元素包括但不限于窗口、滚动条、表格视图、应用图标、卡片等。换句话说，界面元素可以是界面显示的任何元素。
基于此，本申请实施例提供了一种界面显示的方法以及装置，界面元素可以在动画效果上实现联动，***作的界面元素可以影响到未***作的界面元素，从而加强了界面元素之间的联系，使得动画效果更加符合物理规律，并且考虑到了真实的使用场景和用户的***，从而可以提高用户的体验。
下面将首先介绍本申请实施例涉及的几个概念。
“引力”：本申请实施例中将自然界的引力概念引入到了界面元素中。本申请实施例中的界面元素之间可以存在“引力”，由于“引力”的存在，当界面中的一个界面元素***作时(例如点击、移动、删除等)，则该界面中的其他界面元素中的一个或多个由于受到“引力”的影响可以发生移动。下面将结合图3-图5介绍本申请实施例中的“引力”的动画效果。
图3示出了本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。图3中的(a)示出了***作的界面元素的“引力”作用为“吸引力”的示例场景。图3中的(a)所示，右下方的十字图形示意性地表示***作的界面元素的放大的“引力”中心点，在界面元素是应用图标的场景中，当针对应用图标的删除、拖拽释放、合并文件夹、卡片展开等事件发生时，该界面元素中的一点可以是“吸引力”或者“排斥力”的发生中心点。另外，在图3中的(a)中，左上方的十字图形示意性地表示受到***作的界面元素的“引力”影响的另一界面元素的放大的一点。在“引力”动画效果被设置为“吸引力”的情况下，在“吸引力”的作用下，界面元素的移动的方向为每个受到影响的界面元素的元素中心点指向***作的界面元素的发生中心点的矢量方向。类似地，图3中的(b)示出了***作的界面元素的“引力”作用为“排斥力”的示例场景。如图3中的(b)所示，右下方的十字图形示意性地表示发生中心点，而左上方的十字图形示意性地表示元素中心点。在“引力”动画效果被设置为“排斥力”的情况下，在“排斥力”的作用下，界面元素的移动的方向为***作的界面元素的中心点指向每个受到影响的界面元素的中心点的矢量方向。本申请实施例中对于发生中心点和元素中心点的选取不作限定，例如发生中心点和元素中心点可以是界面元素的几何中心，也可以是界面元素中的任意一点。
图4示出了本申请实施例提供的一组图形用户界面(graphical user interface，GUI)。
如图4中的(a)所示，电子设备显示有界面401，该界面401显示有应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标408、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414，在上述应用图标未***作前，上述应用图标可以保持静止。本申请实施中，界面元素之间具有“引力”，界面元素之间的“引力”平衡时，界面元素可以处于静止，本申请实施例中将界面元素的静止状态称为界面元素的平衡状态，例如，如图4中的(a)所示，界面401的应用图标处于平衡状态。当界面中的一个界面元素***作时，例如界面元素被移动，界面元素被点击，界面元素的平衡状态被打破，界面中的其他界面元素会发生联动。
再如图4中的(a)所示，当电子设备检测到用户按住应用图标408向下移动，由于应用图标408对于其他应用图标的“引力”作用，电子设备可以使得应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动。应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动可以理解为，由于应用图标408被移动，原有的平衡状态被打破，则上述应用图标需要根据应用图标408的移动而移动以建立新的平衡状态。
如图4中的(b)所示，应用图标402与应用图标408存在“引力”，当应用图标408向下移动时，应用图标402与应用图标408之间由于“引力”的存在，且应用图标408的“引力”对应用图标402作用为“吸引力”时，应用图标408可以对应用图标402产生“吸引力”以吸引应用图标402向其移动。类似的，应用图标408可以对应用图标403产生“吸引力”以吸引应用图标403向其移动，应用图标408可以对应用图标404产生“吸引力”以吸引应用图标404向其移动，应用图标408可以对应用图标405产生“吸引力”以吸引应用图标405向其移动，应用图标408可以对应用图标406产生“吸引力”以吸引应用图标406向其移动，应用图标408可以对应用图标407产生“吸引力”以吸引应用图标407向其移动，应用图标408可以对应用图标409产生“吸引力”以吸引应用图标409向其移动。
当应用图标408向下移动时，应用图标402与应用图标410之间由于“引力”的存在，且应用图标408的“引力”对应用图标410作用为“吸引力”时，则应用图标408可以对应用图标410产生“排斥力”以排斥应用图标410远离其移动。类似的，应用图标408可以对应用图标411产生“排斥力”以排斥应用图标411远离其移动，应用图标408可以对应用图标412产生“排斥力”以排斥应用图标412远离其移动，应用图标408可以对应用图标414产生“排斥力”以排斥应用图标414远离其移动，应用图标408可以对应用图标414产生“排斥力”以排斥应用图标414远离其移动。
需要说明的是，上述示例中，仅以应用图标408向下移动时，其“引力”对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409作用为“吸引力”，对应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“排斥力”为例，但本申请实施例并不限定于此。
例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409作用为“排斥力”，对应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“吸引力”。
再例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“吸引力”。
再例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“排斥力”。
如图4中的(c)所示，当电子设备检测到用户点击应用图标408，电子设备在电子设备可以使得应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动。
如图4中的(d)所示，应用图标402与应用图标408之间存在“引力”，当应用图标408被点击时，可以认为应用图标402与应用图标408之间的“引力”平衡被打破，若应用图标408的“引力”对应用图标402作用为“吸引力”，则应用图标408可以对应用图标402产生“吸引力”以吸引应用图标402向其移动。类似的，应用图标408可以对应用图标403产生“吸引力”以吸引应用图标403向其移动，应用图标408可以对应用图标404产生“吸引力”以吸引应用图标404向其移动，应用图标408可以对应用图标405产生“吸引力”以吸引应用图标405向其移动，应用图标408可以对应用图标406产生“吸引力”以吸引应用图标406向其移动，应用图标408可以对应用图标407产生“吸引力”以吸引应用图标407向其移动，应用图标408可以对应用图标409产生“吸引力”以吸引应用图标409向其移动，应用图标408可以对应用图标410产生“吸引力”以吸引应用图标410向其移动，应用图标408可以对应用图标411产生“吸引力”以吸引应用图标411向其移动，应用图标408可以对应用图标412产生“吸引力”以吸引应用图标412向其移动，应用图标408可以对应用图标413产生“吸引力”以吸引应用图标413向其移动，应用图标408可以对应用图标414产生“吸引力”以吸引应用图标414向其移动。
需要说明的是，上述图4中的(c)和(d)所示的示例中，仅以应用图标408被点击时，对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414产生“吸引力”为例，但本申请实施例并不限定于此。例如，应用图标408被点击时，对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414产生“排斥力”。
在一些实施例中，上述受到“引力”影响的应用图标可以延时移动，即当用户点击或移动应用图标408后达到一定时间后，其他应用图标才会开始移动。
可以理解的是，受到“引力”影响的应用图标的延时时间可以与应用图标之间的距离有关。例如，如图4中的(a)和(b)所示，用户向下移动应用图标408，由于应用图标404与应用图标408之间的距离小于应用图标402与应用图标408之间的距离，则应用图标404可以先与应用图标402移动。
上文介绍了由于界面元素之间存在“引力”，当用户操作一个界面元素时，可以对其他界面元素产生影响，下面将结合图5示例性的描述一个界面元素受到***作的界面元素的“引力”影响而移动的动画效果细节。
图5示出了根据本申请的实施例的“引力”动画效果中的受到“吸引力”影响的界面元素在不同时刻的位置的示意图以及对应的曲线示意图。如图5中的(a)所示，假设应用图标408为被移动的界面元素，并且应用图标404是受到应用图标408的“吸引力”的界面元素。在应用图标408未被移动前，即t0时刻，应用图标408与应用图标404之间的距离为d1。当应用图标408移动时，应用图标404受到应用图标408的“吸引力”可以向应用图标408移动。
在一些实施例中，如图5中的(a)所示，应用图标404的移动速度可以慢于应用图标408的移动速度，因此在t1时刻，应用图标408与应用图标404之间的距离为d2，d2＞d1。若应用图标408在t1时刻停止移动(例如用户不再拖动应用图标408)，应用图标408可以继续“吸引”应用图标404移动，当两者之间的距离恢复至d1时，两者可以重新恢复原有的引力，则应用图标404不再继续移动。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(c)所示的曲线示意图表示，图5中的(c)的曲线#1为应用图标408的距离时间曲线，曲线#2为应用图标404的距离时间曲线，由图可以看出，在t0-t1时间段内，应用图标408在相同时间内，移动的距离大于应用图标404的移动的距离，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标408不再移动，应用图标404继续移动，则应用图标408和应用图标404之间的距离可以再由d2缩小至d1。
在另一些实施例中，即使应用图标408不停止移动，电子设备也可以使得应用图标404的移动速度快于应用图标408的移动速度，从而应用图标404和应用图标408之间的距离可以缩小，当应用图标404和应用图标408之间的距离恢复至d1时，电子设备可以使得应用图标404和应用图标408保持相同的速度移动。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(d)所示的曲线示意图表示，图5中的(d)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，在t0-t1时间段内，应用图标408的移动速度快于应用图标404的移动速度，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标408速度慢于应用图标404的移动速度，则应用图标408和应用图标404之间的距离不断缩小，直至在t2时刻缩小至d1。
在上述应用图标404和应用图标408移动的过程或移动直至停止的过程中，应用图标404和应用图标408之间的距离可以先变大再变小至原距离。针对应用图标404和应用图标408之间的距离变化可以由图5中的(e)所示的间距时间图表示，由图可知，应用图标404和应用图标408之间的距离从t0-t1由d1增加为d2，再从t1-t2减小为d1。
在另一些实施例中，应用图标408可以先于应用图标404的移动，则两者之间的距离可以增大，当应用图标404开始移动时，其移动速度可以快于应用图标408的速度，则两者之间的距离开始减小直至恢复原距离d1。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(f)所示的曲线示意图表示，图5中的(f)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，在t0-t1时间段内，应用图标408的开始移动，应用图标404未移动，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标404开始移动，且速度快于应用图标408的移动速度，则应用图标408和应用图标404之间的距离不断缩小，直至在t2时刻缩小至d1。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404也可以停止移动。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404可以继续移动直至与应用图标408合并。针对应用图标之间的合并的描述，可以参见下文，在此不展开叙述。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404可以继续向应用图标408移动一定距离，然后应用图标404向远离应用图标408的方向移动直至应用图标404与应用图标408的距离恢复为d1。
在另一些实施例中，应用图标408的移动速度慢于应用图标404的移动速度，则应用图标408与应用图标404之间的距离可以不断缩小。
一种可能的实现方式，应用图标408和应用图标404之间的距离不断缩小至某一个定值后，电子设备可以使得应用图标404的移动速度与应用图标408的移动速度相同，则应用图标404和应用图标408可以保持该定值距离一起移动，其中该定值可以是0，当应用图标408停止移动时，应用图标404可以停止移动，或应用图标404可以向远离应用图标408的方向移动直至应用图标404和应用图标408之间的距离恢复为d1，或应用图标可以继续向应用图标408的方向移动一定的距离或直至与应用图标408合并。
可以理解的是，若应用图标408的“引力”对应用图标404作用为“吸引力”，当应用图标408返回原位置时，例如由于边界的限制，应用图标在被用户抛滑后返回原位置，应用图标408的“引力”对应用图标404作用可以变为“排斥力”，使得应用图标404也可以返回原位置。应用图标408与应用图标404在返回原位置的过程中，两者之间的距离可以先变小然后再恢复至d1。例如，用户拖动应用图标408移动了一段距离后松手，电子设备可以使应用图标408返回原位置，则应用图标404受到应用图标408“排斥力”的作用也可以返回原位置，应用图标408和应用图标404之间的距离可以先变小然后再恢复至d1。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离可以保持不变，即应用图标404和应用图标408之间的距离一直为d1。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离可以先变大再变小。
例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的移动速度可以快于应用图标408的移动速度，则应用图标404和应用图标408之间的距离变大，应用图标404可以先达到原位置，应用图标408继续移动，则应用图标404和应用图标408之间的距离再变小，当应用图标408达到原位置，应用图标404和应用图标408之间的距离恢复为d1。
可以理解的是，针对上述应用图标404和应用图标408在返回原位置的移动的过程中应用图标404先于应用图标408达到原位置的示例，其曲线图类似于图5中的(c)所示的曲线图，为了简洁，在此不再赘述。
再例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的初始移动速度可以快于应用图标408的初始移动速度，则应用图标404和应用图标408之间的距离变大，然后应用图标408可以不断加速使得移动速度超过应用图标404的移动速度，则应用图标404和应用图标408之间的距离再变小，且当应用图标404和应用图标408之间的距离恢复为d1时，应用图标404和应用图标408的同时达到原位置。
可以理解的是，针对上述应用图标404和应用图标408在返回原位置的移动的过程中应用图标404初始移动速度可以快于应用图标408的初始移动速度，且应用图标408可以不断加速使得移动速度超过应用图标404的移动速度的示例，其曲线图类似于图5中的(d)所示的曲线图，为了简洁，在此不再赘述。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离变化过程可以是变大-变小-变大。
例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的初始移动速度可以快于应用图标408的初始移动速度，则应用图标404和应用图标408之间的距离变大，然后应用图标408可以不断加速使得移动速度超过应用图标404的移动速度，则应用图标404和应用图标408之间的距离再变小，然后应用图标408可以先于应用图标404达到并不再移动，而应用图标404可以继续移动至原位置，则应用图标404和应用图标408之间的距离再变大。
针对上述应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离变化过程为变大-变小-变大可以使用图5中的(g)所示的曲线示意图表示，图5中的(g)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，应用图标404的初始移动速度快于应用图标408的移动速度，则应用图标408和应用图标404之间的距离变大，在移动过程中，应用图标404的移动速度不断减小，应用图标408的移动速度不断增加，则应用图标408和应用图标404之间的距离开始缩小。由于应用图标408先于应用图标404达到原位置，则应用图标408的移动速度变为0，而应用图标404继续移动，则应用图标408和应用图标404之间的距离开始增大。
如图5中的(b)所示，假设应用图标408为被点击或被按压的界面元素，并且应用图标404是受到应用图标408的“吸引力”作用影响的界面元素。在应用图标408未被点击或被按压前，应用图标408与应用图标404之间的距离为d1。当应用图标408被点击或被按压时，应用图标404受到应用图标408的“吸引力”可以向应用图标408靠近。应用图标408被点击可以理解为用户点击应用图标408后抬手，应用图标408被按压可以理解为用户点击应用图标408且不抬手。
需要说明的是，在一些实施例中，若应用图标408被按压，应用图标408的尺寸可以发生变化。例如，用户按压应用图标408，电子设备可以使得应用图标408的尺寸变小。再例如，用户按压应用图标408，电子设备可以使得应用图标408的尺寸变大。
在一些实施例中，若应用图标408被点击，则应用图标404在移动过程中，与应用图标408之间的距离可以先变小再恢复至原来的距离，例如，应用图标404在t1时刻与应用图标408之间的距离为d2，d2＜d1，应用图标404在t2时刻与应用图标408之间的距离为d3，d3＜d2＜d1，d3可以是应用图标408与应用图标404之间的最小的距离，当达到该最小距离时，应用图标404可以向远离应用图标408的方向移动，应用图标404在t3时刻与应用图标408之间的距离为d2，应用图标404在t5时刻与应用图标408之间的距离恢复为d。
在另一些实施例中，若应用图标408被按压，则应用图标404受到应用图标408的“吸引力”可以向应用图标408靠近，由于应用图标408并不移动，则两者之间的距离会缩小。应用图标404和应用图标408之间的距离缩小可以分为两种可能的情况：
一种可能的情况是，应用图标404和应用图标408之间的距离不断缩小，直至两个应用图标合并。
一种可能的情况是，应用图标404和应用图标408之间的距离缩小至一定距离后，应用图标404不再继续移动。
需要说明的是，电子设备可以采用任何适当的方式来确定受到“引力”作用影响的应用图标404移动的距离以及移动时的运动状态，即电子设备可以采用任何适当的函数关系式确定应用图标404移动距离以及移动时的运动状态。移动时的运动状态可以理解为界面元素在移动过程中的速度变化。
在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动距离设置为相同的距离，运动状态为匀速移动。以此方式，电子设备用于实现“引力”动画效果的处理可以被简化，例如。如图4中(b)和(d)，应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414的移动距离相同，且移动速度相同。
在另一些实施例中，电子设备可以基于多种因素确定受到“引力”作用的界面元素的移动距离以及运动状态，该多种因素包括但不限于：产生“引力”作用的界面元素的尺寸、产生“引力”作用的界面元素的“引力”范围、产生“引力”作用的界面元素的“引力”方向、产生“引力”作用的界面元素的层级、产生“引力”作用的界面元素的颜色、受到“引力”作用的界面元素的尺寸、受到“引力”作用的界面元素的受力情况(例如，界面元素的摩擦力、界面元素的压力、界面元素的重力)、受到“引力”作用的界面元素的层级、受到“引力”作用的界面元素的颜色、两个界面元素之间的距离等。由于受到多种因素的影响，不同受到“引力”作用的界面元素的移动距离、移动速度可以不同。例如，如图4中的(b)和(d)所示，应用图标402和应用图标404的移动距离可以不同，移动速度也可以不同。下文详细介绍不同因素对于“引力”动画效果的影响以及结合图13示例性的介绍受到“引力”影响的界面元素移动时的距离随时间变化的曲线。
还需要说明的是，***作的界面元素对其他界面元素的“引力”作用表现为“吸引力”还是“排斥力”可以是预定的，也可以是设置的。
本申请实施例中的界面元素通过“引力”关联起来，用户通过操作一个界面元素可以使得其他界面元素发生变化，产生具有联动的动画效果，展现出符合自然规律的动态效果，与用户生活体验更加一致，提高了人机交互性。
上文主要介绍了界面元素之间由于存在“引力”，使得当一个界面元素***作时，由于“引力”的存在，可以影响其他界面因素，而使其他界面因素发生移动，即发生联动移动，受到“引力”影响的界面元素的移动动画效果受到多种因素的影响。下面将介绍不同因素对于“引力”动画效果的影响，由于“引力”动画效果与多种影响因素相关，本申请实施例中的“引力”动画效果也可以称为联动动画效果。
(1)产生“引力”作用的界面元素的“引力”范围：
本申请实施例中，产生“引力”作用的界面元素的“引力”范围可以是有限的。换句话说，产生“引力”作用的界面元素只对在其“引力”范围内的界面因素产生作用，即“引力”范围内的界面元素为受到产生“引力”影响的界面元素，下面将结合图6-图7介绍产生“引力”作用的界面元素的“引力”范围。
在一些实施例中，“引力”范围内的界面元素与产生“引力”作用的界面元素可以是同一个类型的界面元素，从而同一个类型的界面元素之间可以存在“引力”。
在另一些实施例中，“引力”范围内的界面元素与产生“引力”作用的界面元素可以不是同一个类型的界面元素。
图6示出了本申请实施例提供的一组GUI。
例如，如图6中的(a)所示，电子设备显示有界面401，该界面401显示有应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标408、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414，在上述应用图标未***作前，上述应用图标可以保持静止。
如图6中的(a)和(b)所示，当电子设备检测到用户按住应用图标408向下移动，由于应用图标408对于其他应用图标的“引力”作用，与图4中的(b)所示的GUI不同，由于应用图标403、应用图标404、应用图标405、应用图标407、应用图标409与应用图标408的距离较近，电子设备可以使得应用图标403、应用图标404、应用图标405、应用图标407、应用图标409向应用图标408移动，而应用图标402、应用图标406、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414不会发生移动，即应用图标403、应用图标404、应用图标405、应用图标407、应用图标409在应用图标408的“引力”范围内。
在图6中的(a)和(b)所示的示例中，“引力范围”与距离相关，但本申请实施例并不限定于此，“引力”范围还可以与界面元素的移动方向相关，例如，如图6中的(a)和(c)所示，应用图标408向下移动，则与应用图标408存在上下关系的应用图标402、应用图标403、应用图标404、应用图标405、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414由于受到应用图标408的“引力”作用，可以发生移动，移动方向与应用图标408相同。再例如，如图6中的(a)和(d)所示，应用图标408向下移动，则与应用图标408存在上下关系的应用图标402、应用图标403、应用图标404、应用图标405、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414由于受到应用图标408的“引力”作用，可以发生移动，移动方向各自的元素中心点与应用图标408的发生中心点的矢量方向。
本申请实施例中的，“引力范围”还可以与界面元素的层级相关。
电子设备在显示界面元素时，界面元素的布局是确定的，则电子设备可以确定该界面元素所属的画布以及该界面元素所属的控件树，本申请实施例中，可以将同一个画布和/或同一个控件树上的界面元素确定为同一个层级的界面元素。
例如，如图6中的(a)和(e)所示，假设应用图标404、应用图标405、应用图标408、应用图标409是同一个层级，则当应用图标408向下移动时，应用图标404、应用图标405和应用图标409由于受到应用图标408的“引力”作用，可以发生移动。
上文结合图6介绍了几种影响“引力”范围的因素，下面将结合图7详细介绍本申请实施例中提供的几种确定受到产生“引力”的界面元素的“引力”范围的方式，确定受到产生“引力”的界面元素的“引力”范围的方式也可以理解为确定与产生“引力”的界面元素相同类型的界面元素。
一种可能的实现方式，电子设备可以通过计算界面元素之间的距离确定产生“引力”的界面元素的“引力”范围。
图7示出了本申请实施例提供的确定产生“引力”的界面元素的“引力”范围的示意图。例如，如图7中的(a)所示，同一界面包括界面元素701、界面元素702、界面元素703、界面元素704、界面元素705、界面元素706、界面元素707、界面元素708、界面元素709，其中界面元素705可以是***作的界面元素，界面元素705与界面元素704、界面元素706的距离为d1，界面元素705与界面元素702、界面元素708的距离为d2，界面元素705与界面元素701、界面元素703、界面元素707、界面元素709的距离为d3，d1＜d2＜d3，电子设备可以选取与界面元素705之间的距离小于第一阈值的界面元素为受到“引力”影响的界面元素。示例性的，d1＜d2＜第一阈值＜d3，则电子设备可以将界面元素702、界面元素704、界面元素706、界面元素708作为受到“引力”影响的界面元素，而界面元素701、界面元素703、界面元素707、界面元素709不会受到“引力”的影响。
需要说明的是，图7中的(a)所示的示例中，电子设备在确定两个界面元素之间的距离时，以该两个界面元素的中心点为计算的基准点，但本申请实施例并不限定于此，本申请实施例中在计算两个界面元素之间的距离时，可以选取该两个界面元素中的任意一点作为基准点。例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最短的两个点作为基准点。以界面元素705和界面元素702为例，可以选取界面元素705上边界的中点和界面元素702下边界的中点作为基准点。
再例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最长的两个点作为基准点。以界面元素705和界面元素701为例，可以选取界面元素705的右边界与下边界的交点，以及界面元素701的上边界和左边界的交点作为基准点。
再例如，电子设备可以在计算两个界面元素之间的距离时，可以分别计算两个界面元素之间的横向距离、纵向距离，然后根据横向距离和纵向距离中的至少一者和界面元素的移动方向确定两个界面元素之间的距离。
如图7中的(b)所示，界面元素705和界面元素706的横向距离为d4，且界面元素706受到界面元素705的“引力”影响可以朝向界面元素705移动，移动方向为横向，则界面元素705和界面元素706之间的距离可以是两者之间的横向距离。
类似的，界面元素705和界面元素702之间的距离可以是两种之间的纵向距离。
如图7中的(c)所示，界面元素705和界面元素701的横向距离为d4，界面元素7-5和界面元素701的纵向距离为d5，且界面元素701的移动方向既不是横向也不是纵向，则界面元素701和界面元素705的距离可以通过横向距离d4和纵向距离d5并基于界面元素701的移动方向来确定。作为一种示例，如图7的(d)所示，基于横向距离d4和纵向距离d5的大小，电子设备可以确定出以横向距离d4和纵向距离d5为两条直角边的直角三角形，该直角三角形具有斜边。然后，基于界面元素701的移动方向，电子设备可以在直角三角形内确定一条线段，该线段的方向与界面元素701的移动方向相同，则电子设备可以根据三角函数原理确定该线段的长度为d6，即界面元素701和界面元素705之间的距离d6。
作为另一种示例，电子设备可以确定界面元素701的移动方向与横向的夹角，以及界面元素701的移动方向与纵向的夹角，若界面元素701的移动方向与横向的夹角大于界面元素701的移动方向与纵向的夹角，则电子设备可以确定界面元素701与界面元素705的纵向距离为界面元素701与界面元素705之间的距离。相反的，若界面元素701的移动方向与横向的夹角小于界面元素701的移动方向与纵向的夹角，则电子设备可以确定界面元素701与界面元素705的横向距离为界面元素701与界面元素705之间的距离。若界面元素701的移动方向与横向的夹角等于界面元素701的移动方向与纵向的夹角，则电子设备可以随机选取界面元素701与界面元素705的横向距离或纵向距离为界面元素701与界面元素705的之间的距离。
还需要说明的是，第一阈值可以是操作***出厂预置的，也可以由用户设定，也可以由第三方开发者设定。
在一些实施例中，第一阈值可以与界面元素的尺寸、层级、颜色等因素相关。例如，界面元素的尺寸越大，对应的第一阈值可以越大，换句话说，界面元素的尺寸越大，其“引力”范围越大。再例如，不同层级或颜色的界面元素可以对应不同的第一阈值。
一种可能的实现方式，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域作为该界面元素的“引力”范围。
例如，如图7中的(e)所示，假设***作的界面元素为界面元素705，则电子设备可以以界面元素705的发生中心点为圆心，以r1为半径做圆，该圆可以理解为界面元素705的“引力”范围，则被该“引力”范围覆盖的界面元素702、界面元素704、界面元素706、界面元素708可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
再例如，如图7中的(f)所示，假设***作的界面元素为界面元素705，电子设备可以以界面元素705的发生中心点为几何中心，选取矩形为界面元素705的“引力”范围，该矩形长为2b，宽为2a，则被该“引力”范围覆盖的界面元素704、界面元素706可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
需要说明的是，在图7中的(e)和(f)所示的示例中，r1、a、b可以是定值，可以是操作***出厂预置的，也可以由用户设定，也可以由第三方开发者设定。
在一些实施例中，r1、a、b可以与界面元素的尺寸、层级、颜色等因素相关。例如，界面元素的尺寸越大，r1、a、b也可以越大。再例如，不同层级或颜色的界面元素可以对应不同的r1、a、b。
还需要说明的是，在图7中的(e)和(f)所示的示例中，仅以选取的几何图形是圆形和矩形为了，但本申请并不限定于此，例如几何图形还可以是三角形、菱形等。
替代性的，在一些实施例中，电子设备可以将与几何区域的边界相交的界面元素作为受到“引力”影响的界面元素。
例如，如图7中的(g)所示，假设***作的界面元素为界面元素705，则电子设备可以以界面元素705的中心点为圆心做圆，该圆覆盖的界面元素701、界面元素702、界面元素703、界面元素704、界面元素706、界面元素707、界面元素708、界面元素709，其中界面元素701、界面元素703、界面元素707、界面元素709与该圆的边界相交，则电子设备可以将界面元素701、界面元素703、界面元素707、界面元素709作为受到“引力”影响的界面元素，而界面元素702、界面元素704、界面元素706、界面元素708未与该圆的边界相交，则界面元素702、界面元素704、界面元素706、界面元素708不作为受到“引力”影响的界面元素。
一种可能的实现方式，电子设备可以根据产生“引力”作用的界面元素的移动方向确定该界面元素的“引力”范围。
例如，如图7中的(h)所示，假设***作的界面元素为界面元素705，其中界面元素701位于界面元素705的左上方，界面元素702位于界面元素705的上方，界面元素703位于界面元素705的右上方，界面元素704位于界面元素705的左方，界面元素706位于界面元素705的右方，界面元素707位于界面元素705的左下方，界面元素708位于界面元素705的下方，界面元素709位于界面元素705的右上方。电子设备可以根据界面元素705的移动方向确定受界面元素705的“引力”影响的界面元素。
示例性的，当界面元素705向右或向左移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704和界面元素706的移动方向可以与界面元素705相同或相反。
示例性的，当界面元素705向右或向左移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704、界面元素706、界面元素701、界面元素703、界面元素707和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素704、界面元素706、界面元素701、界面元素703、界面元素707和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右或向左移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素的702和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右或向左移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708可以受到界面元素705“引力”的影响而移动，而其他界面元素不动，其中界面元素702和界面元素708的移动方向可以与界面元素705相同或相反。
示例性的，当界面元素705向上或向下移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704和界面元素706的移动方向可以与界面元素705相同或相反，也可以是界面元素的704和界面元素706的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素703、界面元素704、界面元素706、界面元素707和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素703、界面元素704、界面元素706、界面元素707和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或右下移动时，位于界面元素705左上方的界面元素701，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或向右下移动时，位于界面元素705左方的界面元素704，位于界面元素705上方的界面元素702，位于界面元素705左上方的界面元素701，位于界面元素705右方的界面元素706，位于界面元素705下方的界面元素708，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素705、界面元素704、界面元素706、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或右下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素703和界面元素707的移动方向可以与界面元素705相同或相反，也可以是界面元素703和界面元素707的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或向右下移动时，位于界面元素705左方的界面元素704，位于界面元素705左下方的界面元素707，位于界面元素705下方的界面元素708，位于界面元素705上方的界面元素702，位于界面元素705右上方的界面元素703，位于界面元素705右方的界面元素706，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素703和界面元素707的移动方向可以与界面元素705相同或相反，也可以是界面元素703和界面元素707的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705上方的界面元素702，位于界面元素705右方的界面元素706，位于界面元素705下方的界面元素708，位于界面元素705左方的界面元素704，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705左上方的界面元素701，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705左方的界面元素704，位于界面元素705左上方的界面元素701，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705右方的界面元素706，位于界面元素705右下方的界面元素709，可以受到界面元素705的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
一种可能的实现方式，电子设备根据界面元素的层级确定界面元素的“引力”范围。
例如，如图7中的(i)所示，假设***作的界面元素为界面元素705，且界面元素705、界面元素702、界面元素706的层级相同，则界面元素705、界面元素702、界面元素706可以受到界面元素705的“引力”的影响而移动。在该示例中，由于界面元素705、界面元素702、界面元素706的层级相同，则可以将界面元素705、界面元素702、界面元素706理解为同一个类型的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型相同的界面元素为受到“引力”影响的界面元素。
在另一些实施例中，假设界面元素705、界面元素702、界面元素706是具有父子层级关系的界面因素，则界面元素705、界面元素702、界面元素706可以受到界面元素705的“引力”的影响而移动。
在另一些实施例中，如图7中的(i)所示，假设***作的界面元素为界面元素705，且界面元素705、界面元素702、界面元素706的层级相同，则电子设备可以确定界面原701、界面元素703、界面元素704、界面元素707、界面元素708、界面元素709确定为受到界面元素705的“引力”的影响的界面元素。在该示例中，可以根据产生“引力”的界面元素的层级，确定与该界面元素的层级不相同的界面元素为受到“引力”影响的界面元素。换句话说，电子设备可以确定与产生“引力”的界面元素的类型不相同的界面元素为受到“引力”影响的界面元素。
一种可能的实现方式，电子设备根据界面元素的尺寸确定界面元素的“引力”范围。
例如，如图7中的(j)所示，假设***作的界面元素为界面元素705，其中界面元素701、界面元素703、界面元素704、界面元素709的尺寸相同，界面元素702、界面元素705、界面元素707、界面元素708尺寸相同，界面元素706的尺寸大于界面元素705的尺寸，则电子设备可以选取与界面元素705尺寸相同的界面元素，即界面元素702、界面元素707、界面元素708作为受到“引力”影响的界面元素。
替代性的，电子设备不仅可以选取与界面元素705尺寸相同的界面元素，还可以选取与界面元素705的尺寸差值小于第二阈值的界面元素作为受到“引力”影响的界面元素。例如，界面元素706的尺寸大于界面元素705的尺寸，但两者的尺寸差值小于第二阈值，则电子设备也可以将界面元素706作为受到“引力”影响的界面元素。
再例如，例如，如图7中的(j)所示，假设***作的界面元素为界面元素705，其中界面元素701、界面元素703、界面元素704、界面元素709的尺寸相同，界面元素702、界面元素705、界面元素707、界面元素708尺寸相同，界面元素706的尺寸大于界面元素705的尺寸，则电子设备可以选取与界面元素705的尺寸相同或小于界面元素705的尺寸的界面元素，即界面元素701、界面元素702、界面元素703、界面元素704、界面元素707、界面元素708、界面元素709作为受到“引力”影响的界面元素。
类似于针对层级的描述，电子设备可以将相同尺寸或相近尺寸的界面元素确定为同一个类型的界面元素。
在一些实施例中，电子设备可以确定与产生“引力”的界面元素的尺寸相同或相近的界面元素确定为受到“引力”影响的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型相同的界面元素为受到“引力”影响的界面元素。
在另一些实施例中，电子设备可以确定与产生“引力”的界面元素的尺寸差值超过第二阈值的界面元素确定为受到“引力”影响的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型不相同的界面元素为受到“引力”影响的界面元素。
需要说明的是，本申请实施例中影响“引力”范围的并不局限于上文示出的因素，本申请实施例提供的界面显示方法还支持自定义影响“引力”范围的因素。例如，电子设备还可以根据界面元素的颜色，将与产生“引力”的界面元素的相同颜色或不同颜色的界面元素作为受到“引力”影响的界面元素，其中界面元素的颜色可以是界面元素的底色。
相同颜色的界面元素可以理解为相同的色系的界面元素。电子设备在确定“引力范围”时，可以将相同的色系的界面元素确定为受到“引力”影响的界面元素。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的R分量相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的G分量相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的B分量相同。
上文介绍了产生“引力”作用的界面元素的“引力”范围以及如何根据距离、几何区域、移动方向、层级、尺寸等因素确定界面元素的“引力”范围。需要说明的是，本申请实施例中，电子设备可以结合多个因素确定界面元素的“引力”范围，例如，可以结合多个因素中的两个因素，示例性的，距离因素和层级因素的结合，几何区域因素和层级因素的结合，移动方向因素和层级的结合，尺寸因素和层级因素的结合，距离因素和方向因素的结合，距离因素和尺寸因素的结合，距离因素和几何区域因素的结合，几何区域因素和方向因素的结合，几何区域因素和尺寸因素的结合，方向因素和尺寸因素的结合。
类似的，电子设备还可以结合多个因素中的两个以上因素确定界面元素的“引力”范围。
例如，电子设备可以通过界面元素之间的距离以及界面元素的层级关系确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级关系最终确定产生“引力”的界面因素的“引力”范围。
如图7中的(k)所示，假设界面元素705是***作的界面元素，界面元素705与界面元素704、界面元素706的距离为d1，界面元素705与界面元素702、界面元素708的距离为d2，界面元素705与界面元素701、界面元素703、界面元素707、界面元素709的距离为d3，d1＜d2＜d3，界面元素702、界面元素703、界面元素705、界面元素706是同一层级的界面元素，电子设备可以选取与界面元素705之间的距离小于第一阈值且与界面元素属于同一层级的界面元素为受到“引力”影响的界面元素。示例性的，d1＜d2＜第一阈值＜d3，则电子设备可以将界面元素702和界面元素706作为受到“引力”影响的界面元素，而其他界面元素不会受到“引力”的影响。
示例性的，电子设备可以先根据界面元素的层级关系确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域中与产生“引力”作用的界面元素相同层级的界面元素确定“引力”范围。
示例性的，电子设备可以选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级关系最终确定产生“引力”的界面因素的“引力”范围。
如图7中的(l)所示，假设***作的界面元素为界面元素705，界面元素702、界面元素703、界面元素705、界面元素706是同一层级的界面元素，则电子设备可以以界面元素705的发生中心点为圆心，以r1为半径做圆，则被该圆覆盖且与界面元素705同一层级的界面元素702和界面元素706可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
示例性的，电子设备可以先根据界面元素的层级关系确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
需要说明的是，电子设备在根据选取的几何区域确定界面因素时，可以选取与该几何区域边界相交的界面元素。
如图7中的(g)所示，假设***作的界面元素为界面元素705，且界面元素702、界面元素703、界面元素705、界面元素706是同一个层级的界面元素，电子设备可以先根据界面元素705的层级确定受到“引力”影响的界面元素的第一集合，该第一集合中包括界面元素702、界面元素703、界面元素706。电子设备还可以以界面元素705的中心点为圆心做圆，确定与该圆的边界相交的界面元素的第二集合，该第二集合包括界面元素701、界面元素703、界面元素707、界面元素709，电子设备最终可以将第一集合和第二集合中共有的界面元素703作为受到“引力”影响的界面元素，其他界面元素不作为受到“引力”影响的界面元素。
例如，电子设备可以根据产生“引力”作用的界面元素的移动方向和界面元素的层级确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”作用的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后从该集合中选择与产生“引力”作用的界面元素相同层级的界面元素。
示例性的，电子设备可以先根据产生“引力”作用的界面元素层级确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”作用的界面元素的移动方向确定最终的受到“引力”影响的界面元素的集合。
例如，电子设备可以通过界面元素之间的距离以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素的层级以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的层级确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素的层级以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素之间的距离以及产生“引力”的界面元素的移动方向确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与界面元素之间的距离确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与产生“引力”作用的界面元素的移动方向确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”作用的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”作用的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与界面元素的尺寸确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以根据产生“引力”的界面元素的移动方向以及界面元素的尺寸确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据产生“引力”的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定“引力”范围，具体描述可以参考上文所述的根据两个因素确定“引力”范围的描述，在此不再展开叙述。
(2)界面元素的尺寸
在上文中介绍了界面元素的尺寸对于产生“引力”的界面元素的“引力”范围的影响，下面将介绍界面元素的尺寸对于联动动画效果产生的影响。
本申请实施例中界面元素的尺寸可以影响受到“引力”影响的界面元素的移动距离，移动速度。
在一种实施例中，参考图4中的(c)，若应用图标402和/或应用图标408的尺寸增大，则应用图标402的移动距离也可以随之增大。随着应用图标402和/或应用图标408的尺寸增大，可以理解为应用图标402和/或应用图标408的“质量”增大，根据万有引力公式可得，应用图标402受到的“引力”增强，则应用图标402的移动距离可以增加。
需要说明的是，图4中的(c)应用图标402的移动情况可以是应用图标先向靠近应用图标408的方向移动，然后再向远离应用图标408的方向移动以返回原位置，则应用图标402的移动距离包括了向应用图标408的方向移动的距离以及向远离应用图标408的方向移动的距离，则应用图标402的移动距离增加可以理解为，由于应用图标402受到的“引力”增强，其向靠近应用图标408的方向移动的距离增加了，从而在返回原位置时移动的距离也增加了，进而应用图标402的移动距离可以随着应用图标尺寸的增大而增加。
在一种实施例中，继续参考图4中的(c)，若应用图标402和/或应用图标408的尺寸增大，则应用图标402的移动速度也可以随之增大。随着应用图标402和/或应用图标408的尺寸增大，可以理解为应用图标402和/或应用图标408的“质量”增大，根据万有引力公式可得，应用图标402受到的“引力”增强，则应用图标402的移动速度可以增加。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，由于界面元素706的尺寸大于界面元素702的尺寸，电子设备可以使得界面元素706的移动距离大于界面元素702的移动距离。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，界面元素706的尺寸大于界面元素702的尺寸，可以将界面元素的尺寸等价于质量，根据万有引力公式可得，界面元素706受到的“引力”大于界面元素702受到的“引力”，若界面元素706和界面元素702的移动速度都是匀速的，电子设备可以使得界面元素706的移动速度快于界面元素702的移动速度。或虽然界面元素706受到的“引力”大于界面元素702受到的“引力”，电子设备仍可以使得界面元素706的移动速度等于界面元素702的移动速度，或使得界面元素706的移动速度小于界面元素702的移动速度。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，界面元素706的尺寸大于界面元素702的尺寸，可以将界面元素的尺寸等价于质量，根据万有引力公式可得，界面元素706受到的“引力”大于界面元素702受到的“引力”，若界面元素706和界面元素702做变加速移动或匀加速移动，电子设备可以使得界面元素706的加速度大于界面元素702的加速度，或虽然界面元素706受到的“引力”大于界面元素702受到的“引力”，电子设备仍可以使得界面元素706的加速度等于界面元素702的加速度，或使得界面元素706的加速度小于界面元素702的加速度。
综上所述，产生“引力”的界面元素的尺寸和受到“引力”的界面元素尺寸都可以影响联动动画效果，上文所述的界面元素的尺寸对于联动动画效果的影响仅为示例，本申请实施例中可以根据任何包含产生“引力”的界面元素的尺寸和/或受到“引力”的界面元素尺寸的函数关系式确定联动动画效果，即受到“引力”的界面元素的移动距离以及移动时的速度变化。
(3)界面元素之间的距离。
在上文中介绍了界面元素之间的距离对于产生“引力”的界面元素的“引力”范围的影响，下面将介绍界面元素之间的距离对于“引力”动画效果产生的影响。
本申请实施例中界面元素之间的距离可以影响受到“引力”影响的界面元素的移动距离，移动速度。
应理解，针对确定界面元素之间的距离的描述可以参见上文，为了简洁，在此不再赘述。
在一种实施例中，继续参考图4中的(d)，若应用图标402和应用图标408之间的距离增大，则界面元素402的移动距离会减少。随着应用图标402和应用图标408之间的距离增大，根据万有引力公式可得，应用图标402受到的“引力”减弱，则应用图标402的移动距离可以减少。
在一种实施例中，继续参考图4中的(d)，若应用图标402和应用图标408之间的距离增大，则界面元素402的移动距离会减少。随着应用图标402和应用图标408之间的距离增大，根据万有引力公式可得，应用图标402受到的“引力”减弱，则应用图标402的移动速度可以降低。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，则应用图标402的移动距离可以小于应用图标404的移动距离。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，若应用图标402和应用图标404的移动速度都是匀速的，电子设备可以使得应用图标404的移动速度快于应用图标402的移动速度。或虽然应用图标404受到的“引力”大于应用图标402受到的“引力”，电子设备仍可以使得应用图标404的移动速度等于应用图标402的移动速度，或使得应用图标404的移动速度小于应用图标402的移动速度。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，若应用图标402和应用图标404做匀加速移动或变加速移动，电子设备可以使得应用图标的402的加速度可以小于界面元素404的加速度，或虽然应用图标404受到的“引力”大于应用图标402受到的“引力”，电子设备仍可以使得应用图标404的加速度等于应用图标402的加速度，或使得应用图标的402的加速度大于界面元素404的加速度。
综上所述，产生“引力”的界面元素与受到“引力”的界面元素之间的距离可以影响“引力”动画效果，上文所述的界面元素之间的距离对于联动动画效果的影响仅为示例，本申请实施例中可以根据任何包含界面元素之间的距离的函数关系式确定联动动画效果，即受到“引力”的界面元素的移动距离以及移动时的速度变化。
在针对(2)和(3)的介绍中，引入了万有引力模型，万有引力模型可以通过公式1表达：
由公式(1)可得，两个界面元素之间的“引力”与两个界面元素的“质量”和距离有关。由于本申请实施例针对的是界面元素，因此可以使用公式(2)或公式(3)以界面元素的尺寸替代界面元素的“质量”。
M＝K×R (2)
M＝K×r (3)
其中，k为常量参数，M为界面元素的“质量”，R为界面元素的尺寸，r为两个界面元素之间的距离。
结合公式(1)-公式(3)，可以将公式(1)可以简化为公式(4)，
由公式(4)可得，界面元素之间的“引力”与界面元素的尺寸成正比，与界面元素之间的距离成反比。
示例性的，本申请实施例中，可以通过公式(5)确定受到“引力”影响的界面元素移动的距离。
其中a为常量系数，r为两个界面元素之间的距离，R为受到“引力”影响的界面元素的尺寸，s为受到“引力”影响的界面元素移动的距离，0.1和0.8是固定的常量，该固定常量可以改变。本申请实施例中，可以使用界面元素的面积、周长等表征界面元素的尺寸，由公式(5)可得，s与r成反比，与R成正比。该距离可以是受到“引力”影响的界面元素移动的最终距离。若受到“引力”影响的界面元素做单向移动，例如受到“引力””影响的界面元素向产生“引力”的界面元素的方向移动，则该距离是受到“引力”影响的界面元素单向移动的距离；若受到“引力”影响的界面元素做双向移动，例如受到“引力”影响的界面元素先向产生“引力”的界面元素的方向移动，然后再向远离产生“引力”的界面元素的方向移动，则该距离是受到“引力”影响的界面元素双向移动的距离。
需要说明的是，本申请实施例支持自定义界面元素的密度，若定义了界面元素的密度，则可以根据界面元素的密度和尺寸确定界面元素的“引力”，则可以根据公式(5)变换得到公式(6)：
其中，M为受到“引力”影响的界面元素的质量。
还需要说明的是，上述公式(5)和(6)仅为示例，电子设备也可以使受到“引力”影响的界面元素的移动距离随着受到“引力”影响的界面元素的尺寸增大而减小，随着两个界面元素之间的距离增大而增大，或者具有任何其他的函数变化关系。
(4)摩擦力
本申请实施例中，将自然界中的摩擦力引入到了界面元素中，使得动画效果更加贴近自然效果。
图8示出了本申请实施例提供的摩擦力对于联动动画效果的影响的示意图。
如图8中的所示，在同一界面显示有界面元素801、界面元素802、界面元素803，电子设备可以定义界面元素的“最大静摩擦力”和“滑动摩擦力”，“最大静摩擦力”和“滑动摩擦力”可以统称为“摩擦力”，该“最大静摩擦力”可以理解为界面元素移动时需要克服的最大力，“滑动摩擦力”可以理解为界面元素在移动过程中受到的“摩擦力”。在一些实施例中，在界面元素的受到“引力”和“最大静摩擦力”的情况下，“引力”需要大于或等于“最大静摩擦力”，界面元素才会开始移动。如图8所示，假设界面元素801为***作的界面元素，界面元素801与界面元素802之间的“引力”以及界面元素801与界面元素803之间的“引力”相等，均为f1，界面元素802的“最大静摩擦力”为f2，界面元素803的“最大静摩擦力”为f3，其中，f3≤f1＜f2，由于，界面元素803的“最大静摩擦力”小于或等于界面元素801与界面元素803之间的“引力”，则界面元素803可以发生移动，而界面元素802的“最大静摩擦力”大于界面元素801与界面元素803之间的“引力”，则界面元素802不会发生移动。
在一些实施例中，当f3大于f1时，则电子设备可以增加f1以使f1大于f3，从而界面元素802也会发生移动，但界面元素802发生移动的时间可以晚于界面元素803发生移动的时间，从而使得界面元素802的移动存在时延。换句话说，当用户操作界面元素801后达到预设时间后，界面元素802开始移动。
在一些实施例中，界面元素803发生移动时，界面元素803的移动速度可以是匀速的，可以理解为界面元素803在移动时不再受到“引力”和“滑动摩擦力”的影响，当界面元素803移动一定距离后，电子设备可以停止界面元素803的移动。
在另一些实施例中，界面元素803发生移动时，电子设备可以根据界面元素803的“滑动摩擦力”和其受到的“引力”确定界面元素803的移动效果。
示例性的，若界面元素803的“滑动摩擦力”与其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动，由于界面元素801和界面元素803之间的距离不断缩小，使得界面元素803受到的“引力”不断增大，从而界面元素803的移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动。在另一些示例中，界面元素803最终可以与界面元素801重合。
示例性的，若界面元素803的“滑动摩擦力”小于其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动或界面元素803的初速度可以为0，由于界面元素803的“滑动摩擦力”小于其受到的“引力”，则界面元素803可以做加速移动，移动速度不断加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动。在另一些示例中，界面元素803最终可以与界面元素801合并。
示例性的，若界面元素803的“滑动摩擦力”与其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动，由于界面元素801和界面元素803之间的距离不断缩小，使得界面元素803受到的“引力”不断增大，从而界面元素803的移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动，电子设备可以改变界面元素803的“滑动摩擦力”以使“滑动摩擦力”大于“引力”，则界面元素803的移动速度可以减缓直至停止移动。
示例性的，若界面元素803的“滑动摩擦力”小于其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动或界面元素803的初速度可以为0，由于界面元素803的“滑动摩擦力”小于其受到的“引力”，则界面元素803移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，电子设备可以改变界面元素803的“滑动摩擦力”以使“滑动摩擦力”大于“引力”，则界面元素803的移动速度可以减缓直至停止移动。
需要说明的是，上述针对根据界面因素的“滑动摩擦力”和“引力”确定移动的动画效果的描述仅为示例，电子设备还可以根据界面因素的“滑动摩擦力”和“引力”确定任何其他的函数变化关系，从而可以确定界面因素在移动过程中的速度变化、以及移动距离。
本申请实施例中，在确定界面元素的“摩擦力”时，可以通过多种几种方式确定界面元素的“摩擦力”。
一种可能的实现方式，电子设备可以随机确定界面元素的“摩擦力”。例如，将界面元素#1的“最大静摩擦力”定义为f#1，界面元素#2的“最大静摩擦力”定义为f#2。
可以理解的是，若电子设备随机确定界面元素的“摩擦力”，则电子设备针对同一个界面元素，在不同次的“引力”联动中，可以将该界面元素确定成不同的“摩擦力”，换句话说，在该种可能的实现方式中，界面元素的“摩擦力”可以不是固定的。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“摩擦力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“摩擦力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“摩擦力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“摩擦力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“摩擦力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“摩擦力”越大；示例性的，若界面元素的颜色的RGB分量的离散度越高，其界面元素的“动摩擦因数”越大，则其“摩擦力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“摩擦力”，然后根据每一个对应的“摩擦力”求和得到界面元素的“摩擦力”。
还应理解，上述根据界面元素的颜色确定界面元素的“摩擦力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“摩擦力”。例如，不同的尺寸可以对应有不同的“摩擦力”，越大的界面元素，其“摩擦力”也可以越大。
(5)重力
本申请实施例中，将自然界中的重力引入到了界面元素中，使得动画效果更加贴近自然效果。
在针对(4)的介绍中，电子设备定义了界面元素的“最大静摩擦力”。为了更加符合物理规律，本申请实施例中，除了定义界面元素的“最大静摩擦力”，还可以定义界面元素的“重力”以及动摩擦因数，从而可以根据界面元素的“重力”以及动摩擦因数确定界面因素的“最大静摩擦力”。在确定界面元素的“最大静摩擦力”后，电子设备可以根据界面元素的“最大静摩擦力”以及其受到的“引力”确定界面元素是否会发生移动以及移动时的移动距离和运动状态，具体描述可以参见上文，在此不再赘述。
本申请实施例中，在确定界面元素的“摩擦力”时，可以通过以下几种方式确定界面元素的“重力”。
一种可能的实现方式，电子设备可以随机确定界面元素的“重力”。例如，将界面元素#1的“重力”定义为G#1，界面元素#2的“重力”定义为G#2。
可以理解的是，若电子设备随机确定界面元素的“重力”，则电子设备针对同一个界面元素，在不同次的“引力”联动中，可以将该界面元素确定成不同的“引力”，换句话说，在该种可能的实现方式中，界面元素的“重力”可以不是固定的。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“重力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“重力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“重力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“重力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“重力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“重力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“重力”，然后根据每一个对应的“重力”求和得到界面元素的“重力”。
还应理解，上述根据界面元素的颜色确定界面元素的“重力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“重力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“重力”。例如，不同的尺寸可以对应有不同的“重力”，越大的界面元素，其“重力”也可以越大。
需要说明的是，若界面元素是文件夹，该文件夹包括多个界面元素时，该文件夹的“重力”可以是通过该多个界面元素的“重力”相加得到。
(6)压力
本申请实施中，将自然界中的压力引入到了界面元素中，使得动画效果更加贴近自然效果。
图9示出了本申请实施例提供的压力对于联动动画效果的影响的示意图。
如图9中的(a)所示，在同一界面显示有界面元素901、界面元素902、界面元素903，其中用户按压界面元素901，电子设备可以通过压力传感器检测到用户对界面元素901的压力为f1，如图9中的(a)所示，界面元素902和界面元素903受到“引力”的影响可以向界面元素901移动。若用户按压界面元素901的力由f1增加为f2时，如图9中的(b)所示，界面元素902和界面元素903的移动距离增大。在一些实施例中，界面元素902和界面元素903的移动速度也可以加快。
如图9中的(c)所示，在同一界面显示有界面元素901、界面元素903、界面元素904，其中用户按压界面元素901，电子设备可以通过压力传感器检测到用户对界面元素901的压力为f1，如图9中的(c)所示，界面元素903受到“引力”的影响可以向界面元素901移动，但界面元素904未发生移动。若用户按压界面元素901的力由f1增加为f2时，如图9中的(d)所示，界面元素904和界面元素903可以向界面元素901移动，且界面元素903的移动距离增大。在一些实施例中，界面元素903的移动速度也可以加快。
在一些实施例中，当用户按压界面元素时，电子设备可以使得被按压的界面元素的尺寸变大，被按压的界面元素的尺寸变化可以与用户按压界面元素的压力成正比。例如，如图9中的(c)和(d)所示，由于f1＜f2，当用户按压界面元素901的压力由f1变为f2时，界面元素901的尺寸可以变大。
(7)产生“引力”的界面元素的移动动画效果。
产生“引力”的界面元素的移动动画效果也可以影响联动动画效果，从而可以加强产生“引力”的界面元素与受到“引力”影响的界面元素之间的联系。
示例性的，参考图4中的(a)和(b)，若用户移动应用图标408的速度加快，则受到“引力”影响的应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414的移动速度也会加快。
(8)移动方向。
本申请实施中的界面元素移动的方向不仅包括平面方向，还可以包括深度方向，深度方向是指与电子设备屏幕垂直的方向。
图10示出了本申请实施例提供的移动方向对于联动动画效果的影响的示意图。
如图10所示，在同一界面显示有界面元素1001、界面元素1002、界面元素1003，其中用户按压界面元素1001，若界面元素的移动方向包括深度方向，则界面元素1001的尺寸可以缩小，界面元素1001尺寸缩小可以理解为界面元素1001向靠近电子设备屏幕的方向移动，界面元素1002和界面元素1003由于受到界面元素1001的“引力”影响，界面元素1002和界面元素1003的尺寸也可以缩小。
在一些实施例中，界面元素1001的尺寸缩小的比例大于界面元素1002和界面元素1003的尺寸缩小的比例。上文描述了“引力”范围、界面元素的尺寸、界面元素之间的距离、摩擦力、重力、压力、产生“引力”的界面元素的移动动画效果、移动方向对于联动动画效果的影响，类似于多种因素对于“引力”范围的影响，上述因素也可以互相结合以影响联动动画效果。下面将结合不同影响因素描述对于联动动画效果的影响。
例如，电子设备可以根据界面元素的尺寸和“摩擦力”确定联动动画效果。
在一些实施例中，根据上文的描述，界面元素的尺寸越大，其受到的“引力”越大，但其受到的“摩擦力”也可以越大，则电子设备需要根据“引力”和“摩擦力”确定界面元素是否能够移动以及能够移动时的移动距离和移动的运动状态。
示例性的，图11示出了本申请实施例提供的不同影响因素对于联动动画效果的影响。如图11中的(a)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，其中界面元素1101与界面元素1102、界面元素1103、界面元素1104之间的距离都相等，且界面元素1102的尺寸大于界面元素1103和界面元素1104的尺寸，则界面元素1102受到的“引力”大于界面元素1103受到的“引力”和界面元素1104受到的“引力”，若不考虑摩擦力的情况下，界面元素1102的移动距离可以大于界面元素1103和界面元素1104的移动距离。若考虑摩擦力的情况下，由于界面元素1102的尺寸较大，其“最大静摩擦力”也较大，当界面元素1102的“最大静摩擦力”大于界面元素1102受到的“引力”时，界面元素1102可以不发生移动，对应的，界面元素1103和界面元素1104的尺寸较小，其“最大静摩擦力”也较小，从而界面元素1103和界面元素1104仍还可以发生移动。在一些情况下，虽然界面元素1103和界面元素1104仍可以移动，但由于界面元素1103和界面元素1104受到“摩擦力”的影响，界面元素1103和界面元素1104移动的距离可以减小。
界面元素的尺寸和“摩擦力”不仅可以影响界面元素是否移动以及界面元素的移动距离，还可以影响界面元素的移动速度。继续参考图11中的(a)，由于受到“摩擦力”的影响，界面元素1103和界面元素1104的移动速度可以减小。
例如，电子设备可以根据界面元素之间的距离和“摩擦力”确定联动动画效果。
在一些实施例中，根据上文的描述，界面元素之间的距离越大，其受到的“引力”越小，若考虑到界面元素的“摩擦力”，则电子设备需要根据“引力”和“摩擦力”确定界面元素是否能够移动以及能够移动时的移动距离和移动的运动状态。
示例性的，如图11中的(b)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，其中界面元素1101与界面元素1103、界面元素1104之间的距离相等，且小于与界面元素1102之间的距离，且界面元素1102、界面元素1103、界面元素1104的尺寸相等，则界面元素1102受到的“引力”小于界面元素1103受到的“引力”和界面元素1104受到的“引力”，若不考虑摩擦力的情况下，界面元素1102的移动距离可以小于界面元素1103和界面元素1104的移动距离。若考虑摩擦力的情况下，由于界面元素1102与界面元素1101之间的距离较大，其受到的“引力”较小，当界面元素1102的“最大静摩擦力”大于界面元素1102受到的“引力”时，界面元素1102可以不发生移动，对应的，界面元素1103和界面元素1104的与界面元素1101之间的距离较大，其受到的“引力”较大，从而即使界面元素1103和界面元素1104存在“摩擦力”，界面元素1103和界面元素1104仍还可以发生移动。在一些情况下，虽然界面元素1103和界面元素1104仍可以移动，但由于界面元素1103和界面元素1104受到“摩擦力”的影响，界面元素1103和界面元素1104移动的距离可以减小。
界面元素之间的距离和“摩擦力”不仅可以影响界面元素是否移动以及界面元素的移动距离，还可以影响界面元素的移动速度。继续参考图11中的(b)，由于受到“摩擦力”的影响，界面元素1103和界面元素1104的移动速度可以减小。
例如，电子设备可以根据界面元素的尺寸和“重力”确定联动动画效果。
例如，电子设备可以根据界面元素之间的距离和“重力”确定联动动画效果。
应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据界面元素的尺寸和“重力”确定联动动画效果以及根据界面元素之间的距离和“重力”确定联动动画效果的描述，可以参考针对根据界面元素的尺寸和“摩擦力”确定联动动画效果以及根据界面元素之间的距离和“摩擦力”确定联动动画效果的描述。
例如，电子设备可以根据“压力”和“摩擦力”确定联动动画效果。
示例性的，如图11中的(c)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，当用户操作界面1101的压力为f1时，界面元素1102、界面元素1103、界面元素1104不发生移动，当用户操作界面元素1101的压力由f1增加至f2时，界面元素1102、界面元素1103、界面元素1104发生移动。
例如，电子设备可以根据“重力”和“摩擦力”确定联动动画效果。
应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据“重力”和“摩擦力”确定联动动画效果的描述，可以参考针对根据“压力”和“摩擦力”确定联动动画效果的描述。
例如，电子设备可以根据“压力”和“移动方向确定联动动画效果。
示例性的，如图11中的(d)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，当用户按压界面1101的压力为f1时，若移动方向包括深度方向时，界面元素1101、界面元素1102、界面元素1103、界面元素1104的尺寸可以缩小，当用户按压界面元素1101的压力由f1增加至f2时，界面元素1101、界面元素1102、界面元素1103、界面元素1104的尺寸缩小的幅度增加。
需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定联动动画效果。
本申请实施例中将自然界中多个力的概念引入到了界面元素中，使得界面元素之间可以联动，且联动的动画效果符号自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
上文结合图5中介绍了受到“引力”影响的界面元素，下面将介绍受到“引力”影响的界面元素移动时的位移时间变化的曲线以及产生“引力”影响的界面元素移动时的位移时间变化的曲线和速度随时间变化的曲线。
图12示出了根据本申请实施例的联动动画效果的动画过程和相关控制逻辑的示意图。在电子设备的操作***中，动画本质上就是根据刷新率实时显示当前的界面或者控件，利用人类的视觉暂留原理，使得用户感觉所显示的画面就是运动的。因此，如图12所示，电子设备可以首先确定动画的初态1210和动画的终态1220。另外，电子设备可以确定从联动动画的初态1210变换到联动动画的终态1220的过程持续的动画时间1205。再者，电子设备还可以确定动画类型1230和动画变换形式1240。例如，动画类型4430可以包括界面元素的位移动画1232、缩放动画1234、旋转动画1236、透明动画1238等，而“动画变换形式1240可以通过插值器1242和估值器1244来控制，例如在固定的动画时间1205里进行相关变换速度的控制等，对于本申请实施例而言，变换速度可以是界面元素的移动速度。
在本申请实施例中，为了实现“引力”的动画效果，主要是涉及到动画类型1230中的位移动画1232，但是应当理解，其他的联动动画类型也可以可能的。如上文描述的，本申请实施例中的联动动画效果产生的位移动画效果可以是界面元素先朝向某一个方向移动，然后再以相反的方向复位，也可以是界面元素朝向某一个方向移动一定距离后停止。
针对界面元素先朝向某一个方向移动，然后再以相反的方向复位这一情况，两段动画可以分别定义时长和插值器，应用侧可以按需进行调节。应理解，电子设备可以采用已知的或未来发现的任何适当的位移时间曲线来控制界面元素的移动细节。在一些实施例中，电子设备可以选择使用贝塞尔曲线或弹性力曲线作为界面元素的移动曲线。例如，电子设备可以使用二阶贝塞尔曲线来控制界面元素先朝向某一个方向移动，并且使用弹性力曲线来控制界面元素的复位，或者反之亦然。当然，在其他实施例中，电子设备也可以使用贝塞尔曲线或弹性力曲线之一来控制向某一个方向移动以及控制界面元素的复位。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制界面元素的移动，使得联动动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。下文将结合图13来描述电子设备基于二阶贝塞尔曲线来控制界面元素朝向某一个方向移动的示例，以及描述电子设备基于弹性力曲线来控制界面元素复位的示例。
图13中的(a)示出了根据本申请实施例的界面元素的位移随时间变化曲线为贝塞尔曲线的示意图。在图13中的(a)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示距离。在一些实施例中，用于控制界面元素移动的插值器可以使用常见的曲线插值器。参考图4、图5和图13中的(a)，电子设备可以控制应用图标404在t0-t2时间段按照图13中的(a)所示的位移时间曲线进行移动。
具体地，电子设备可以通过选择二阶贝塞尔曲线的两个二阶的点，从而达到界面元素的不同移动效果。以此方式，位移时间曲线与时间的相互配合将会产生运动的韵律感。电子设备调整位移时间曲线可以使界面元素实现加速和减速，而不是以恒定的速率移动。
需要说明的是，本申请实施例仅以二阶贝塞尔曲线作为位移时间曲线描述了一些示例，但是本申请实施例不限于此，而是可以等同地将任何曲线形式作为位移时间曲线来实现界面元素的移动。例如，这样的曲线形式包括但不限于一阶贝塞尔曲线、三阶或更高阶贝塞尔曲线、其他已知的或未来发现的其他曲线形式、或者直线。
图13中的(b)示出了根据本申请实施例的界面元素的位移随时间变化义曲线为临界阻尼弹性力曲线的示意图。在图13中的(b)的示例中，图5中描绘的应用图标404在t2-t4时刻的位移时间曲线为弹性力曲线，例如，临界阻尼的弹性力曲线。一般地，弹性力曲线在不同的操作场景可以使用不同的状态，也即，临界阻尼、欠阻尼和过阻尼。在不同的阻尼状态下，位移时间的弹性力曲线可以是不一样的。具体地，三种情况如下：阻尼的平方等于4倍的质量乘以刚性，这是临界阻尼。进一步地，如果阻尼大就是过阻尼，刚性大就是欠阻尼。特别地，阻尼的平方小于4倍质量乘以刚性为欠阻尼，而阻尼的平方大于4倍的质量乘以刚性为过阻尼。在图13中的(b)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移。应当理解，尽管图13中的(b)将本申请实施例的界面元素复位的位移时间曲线示例性地描绘为临界阻尼弹性力曲线，但是本申请实施例不限于此，而是等同地适用于任何其他的曲线，例如还可以是欠阻尼弹性力曲线或过阻尼弹性力曲线。例如，如图13中的(c)所示为应用图标404在t2-t4时刻的位移时间曲线为欠阻尼弹性力曲线，如图13中的(d)所示为应用图标404在t2-t4时刻的位移时间曲线为过阻尼弹性力曲线。
在一些实施例中，弹性引擎差值其的相关设置如下：
代码类的实现：
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.HWSpringAnimation(K object,FloatPropertyCompat<K>property,floatstiffness,float damping,float startValue,float endValue,float velocity)
2.HWSpringAnimation(K object,FloatPropertyCompat<K>property,floatstiffness,float damping,float endValue,float velocity)
动画类调用实例：
1.HWSpringAnimation animation＝HWSpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；
2.animation.start()；
图13中的(a)和(b)示出的是受到“引力”影响而移动的界面元素的位移时间曲线，在一些实施例中，产生“引力”的界面元素可以在用户松手后继续移动，例如用户抛滑界面元素，则用户的手指在离开屏幕后，界面元素仍可以继续向前移动一定距离，则该界面元素的位移时间曲线可以是图12中的(a)和(b)所示的位移时间曲线，也可以通过下文提供的摩擦力模型确定。
示例性的，本申请实施例中的摩擦力模型可以满足公式(4)和公式(5)
v(t)＝V0×e-4.2×f×t (7)
其中，v(t)为界面元素的最终速度，V0为界面元素的初速度，界面元素的初速度可以与用户抛滑界面元素的速度相关，f为界面元素受到的“摩擦力”，s(t)为界面元素的移动距离，t为移动时间，公式(7)和公式(8)中的常数部分仅为示例，本申请实施例并不限定于此
界面元素的“摩擦力”可以是电子设备或用户或开发者配置的，由于“摩擦力”的存在，v(t)为0，则通过公式(4)可以计算得到t，然后将t代入公式(5)可以得到界面元素的移动距离。
应理解，针对界面元素的“摩擦力”的详细描述可以参见上文。
还应理解，上述摩擦力模型还可以用于确定受到“引力”影响的界面元素的移动距离，若上述摩擦力模型用于确定“受到”引力影响的界面元素的移动距离时，“受到”引力影响的界面元素的初速度可以是电子设备配置的，该初速度可以与用户的操作相关，例如用户抛滑界面元素的速度越大，则“受到”引力影响的界面元素的初速度越大。
在上文中，描述了“摩擦力”因素如何控制界面元素停止移动，该界面元素可以是产生“引力”的界面元素，也可以是受到“引力”影响的界面元素。此外，界面元素能够被移动的位置是否受到限制也可以控制界面元素在何处停止移动。
具体地，在一些实施例中，界面元素能够被移动到的位置是不受限制的，例如，参考图4中的(a)和(b)，应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414可以一直随着应用图标408移动而移动。在这种情况下，基于摩擦力模型确定的距离即为上述应用图标将要移动的距离。然而，在另一些实施例中，界面元素能够被移动到的位置是受限制的。换句话说，界面元素只能被移动到的预定位置。换句话说，界面元素的移动距离是有限的。在这种情况下，虽然可以基于摩擦力模型确定界面元素将要移动的距离，但是如果界面元素在移动了该距离之后，并不位于预定位置处，则需要调整界面元素将要移动的距离，使得界面元素能够被移动到预定位置处。例如，可以将界面元素移动到与基于摩擦力模型确定的停止位置最近该距离之后，并不位于预定位置处，则需要调整界面元素将要移动的距离，使得界面元素能够被移动到预定位置处。例如，可以将界面元素移动到与基于摩擦力模型确定的停止位置最近的预定位置处。由此，界面元素将要移动的距离可以基于摩擦力模型和预定位置两者共同确定。
上文在介绍本申请实施时提供的界面显示方法时，以桌面的应用图标作为示例，但本申请实施例并不限定于此，下文将结合图14-21介绍本申请实施例提供的界面显示方法的场景示意图。
图14示出了本申请实施例提供的一组GUI。
如图14中的(a)所示，电子设备显示有界面1401，界面1401可以是负一屏，电子设备在界面1401上显示有卡片1402、卡片1403、卡片1404、卡片1405，上述相邻卡片之间的距离可以是相等的。电子设备可以响应于检测到用户针对卡片1403的滑动操作，显示如图14中的(b)所示的GUI。
如图14中的(b)，电子设备响应于用户针对卡片1403向上滑动的操作，可以使得卡片1403向上移动，同时由于卡片1402受到卡片1403的“排斥力”，卡片1402也可以向上移动，卡片1404和卡片1405受到卡片1403的“吸引力”可以向上移动。
在一些实施例中，若用户向上滑动的操作是抛滑，卡片1403与卡片1402之间的距离可以先减小再恢复至原距离，卡片1403与卡片1404之间的距离以及卡片1403与卡片1405之间的距离可以先变大再恢复至原距离。若用户向上滑动的操作是按压卡片1403向上滑动，卡片1403与卡片1402之间的距离可以减小至一定距离后不再改变，类似的，卡片1403与卡片1404之间的距离以及卡片1403与卡片1405之间的距离可以变大至一定距离后不再改变，当用户松手后，上述卡片之间的距离可以恢复至原距离。
从上文叙述中可知，上述卡片在移动过程直至停止的过程中，卡片1402与卡片1403之间存在最小距离d1，卡片1403与卡片1404之间存在最大距离d2，卡片1403与卡片1405之间存在最大距离d3，假设卡片1402与卡片1403之间的原距离为d11，卡片1402与卡片1404之间的原距离为d22，卡片1402与卡片1405之间的原距离为d33，则卡片1402与卡片1403之间的距离变化幅度为△d1＝d11-d1，卡片1403与卡片1404之间的距离变化幅度为△d2＝d2-d22，卡片1403与卡片1405之间的距离变化幅度为△d3＝d3-d33，在一些实施例中，△d1＝△d2＝△d3。
在另一些实施例中，上述卡片在移动过程中，卡片之间的距离可以保持不变，则△d1＝△d2＝△d3＝0。
进一步的，根据上文所述的影响联动动画效果的因素，卡片1402、卡片1404、卡片1405可以有不同的动画效果，即卡片1402、卡片1403、卡片1404、卡片1405的位移时间曲线可以不同，以及△d1、△d2、△d3可以不同。
示例性的，由于卡片1402和卡片1403之间的距离与卡片1403和卡片1404之间的距离相等，而卡片1403与卡片1405之间的距离大于卡片1402和卡片1403之间的距离，则电子设备可以使得卡片1402和卡片1404的移动速度大于卡片1405的移动速度。类似的，卡片1402和卡片1404的移动距离大于卡片1405的移动距离，使得△d1＝△d2＞△d3。
示例性的，假设卡片1402和卡片1403是一个层级，卡片1403和卡片1034、卡片1405不是一个层级，则卡片1404和卡片1405不会与卡片1403发生联动，即不会向上移动。
示例性的，若定义了卡片的“摩擦力”，假设卡片1402和卡片1405的“摩擦力”大于其受到的“引力”，卡片1404的“摩擦力”小于其受到的“引力”，则卡片1402和卡片1405不会与卡片1403发生联动。
示例性的，若定义了卡片的“摩擦力”，电子设备在移动卡片时，可以根据卡片的“摩擦力”和“引力”以任何包含“摩擦力”和“引力”的函数关系式确定卡片移动时的速度以及距离。
示例性的，若用户向上滑动的速度增加，卡片1402、卡片1404、卡片1405的移动速度也随着增加。
示例性的，若用户向上滑动的速度增加，卡片1402与卡片1403之间的最小距离d1可以缩小，卡片1403与卡片1404之间的最大距离d2可以增大，卡片1403与卡片1405之间的最大距离d3可以增大。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定卡片1402、卡片1404、卡片1405动画效果，针对影响因素对于动画效果的影响的具体描述可以参见上文。
如图14中的(c)和(d)所示，若卡片1405下方还有卡片，随着用户滑动卡片1403，电子设备可以使得卡片1402继续向上移动直至界面1401不再显示卡片1402，且在卡片1405下方的卡片1406由于“引力”的影响，可以向上移动。
需要说明的是，虽然图14中的(c)中界面1401中未显示卡片1406，但是在画面布局时，卡片1406已经是存在的，即可以理解为卡片1403与卡片1406之间存在“引力”，则当卡片1403被滑动时，卡片1406由于“引力”作用，可以向着卡片1403滑动的方向移动，即向上移动。
在一些实施例中，上述卡片在移动过程中，卡片1403与卡片1404之间的距离、卡片1403与卡片1405之间的距离、卡片1403与卡片1406之间的距离可以先变大再变小，当停止移动时，上述卡片可以保持如图14中的(d)所示的距离。
需要说明的是，上述卡片在移动过程中的距离时间曲线可以参考图5所示的距离时间曲线，为了简洁，在此不再赘述。
还需要说明的是，虽然卡片1403与卡片1406之间的距离可以先变大再变小，但由于卡片1406在未显示在界面1401中时已受到“引力”的影响开始移动，则卡片1403与卡片1406之间的距离变大的过程可能发生在卡片1406显示在界面1401之前，因此在一些情况下，对于用户而言，用户可能看到的是卡片1403与卡片1406之间的距离变小的过程。
针对该种情况，卡片1403和卡片1406的时间距离曲线可以如图14中的(e)所示，图14中的(e)的曲线#1为卡片1403的距离时间曲线，曲线#2为卡片1406的距离时间曲线，由图可以看出，在t0-t1时间段内，卡片1403在相同时间内，移动的距离大于卡片1406的移动的距离，则卡片1403和卡片1406之间的距离变大，当达到t1时刻，卡片1406出现在界面1401中，且卡片1403不再移动，卡片1406继续移动，则卡片1403和卡片1406之间的距离可以变小。
针对该种情况，卡片1403和卡片1406的之间的距离可以使用图14中的(f)示出的间距时间图表示，由图可知，在t0-t1时间段内，卡片1403和卡片1406之间的距离由d1增加至d2，在t1-t2时间段内，卡片1403和卡片1406之间的距离再由d2减小至d1。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时，可以与其他界面元素关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
图15示出了本申请实施例提供的一组GUI。
如图15中的(a)所示，电子设备显示有界面1501，该界面1501为消息通知界面，界面1501显示有消息1502、消息1503、消息1504、消息1505、文本元素1506、搜索栏1507。
如图15中的(a)和(b)所示，电子设备检测到用户向下滑动的操作，例如用户可以在消息1503处抛滑，或用户可以按住消息1503向下滑动，电子设备可以响应于用户的操作，使得消息1502、消息1504、消息1505由于受到“引力”的影响而发生移动，而文本元素1506、搜索栏1507不会发生移动。此外，在消息1502上方的消息1508由于也受到消息1503的“引力”的影响，随着消息1503的向下移动，消息1508受到“引力”的影响，可以逐渐显示在界面1501中。
在一些实施例中，文本元素1506和搜索栏1507不移动的原因可以是电子设备在生成布局时，文本元素1506的层级以及搜索栏1507的层级与消息1503的层级不同，则消息1503产生的“引力”无法影响到文本元素1506和搜索栏1507。
在一些实施例中，文本元素1506和搜索栏1507不移动的原因可以是文本元素1506的层级以及搜索栏1507受到的“摩擦力”，则消息1503产生的“引力”无法影响到文本元素1506和搜索栏1507
在一些实施例中，上述消息在移动直至停止的过程中，消息1502与消息1503以及消息1503与消息1508之间的距离可以先变大再变小，消息1503与消息1504、消息1503与消息1505以及之间的距离可以先变小再变大。类似于上文针对图13的描述，消息1502与消息1503之间可以存在最大距离，消息1503与消息1504之间可以存在最小距离，消息1503与消息1505之间可以存在最小距离，消息1503与消息1508之间可以存在最小距离。
在另一些实施例中，上述消息在移动过程中，消息之间的距离可以保持不变。
类似的，根据上文所述的影响联动动画效果的因素，消息1502、消息1504、消息1505、消息1508可以有不同的动画效果。应理解，具体描述可以参见上文描述，为了简洁，在此不再赘述。
如图15中的(c)所示，上述消息不再移动时，上述每相邻的两个消息之间的距离可以相等。若消息1506为最上方的消息，且电子设备检测到用户继续向下滑动的操作，可以显示如图15中的(d)所示的GUI。
如图15中的(d)所示，由于消息1506为最上方的消息，随着用户继续向下滑动，由于已不会再显示新的消息，为了提升人机交互体验，电子设备可以使得文本元素1506和搜索栏1507随着用户向下滑动的操作而移动。当用户松手或产生“引力”的消息1503停止向下移动时，电子设备可以将消息1502、消息1503、消息1504、消息1505、文本元素1506、搜索栏1507复位，显示如图15中的(c)所示的GUI。
示例性的，电子设备可以在确定界面1501中无与消息1503相同层级的界面元素时，将其他不同层级的界面元素设置为受到“引力”影响的界面元素。
示例性的，电子设备可以改变文本元素1506和搜索栏1507的“摩擦力”，使得文本元素1506和搜索栏1507受到的“引力”大于“摩擦力”从而文本元素1506和搜索栏1507可以向下移动。
示例性的，电子设备可以改变文本元素1506和搜索栏1507的层级映射关系，使得文本元素1506和搜索栏1507的层级与消息1503的层级相同，从而文本元素1506和搜索栏1507可以向下移动。
类似的，当文本元素1506和搜索栏1507可以向下移动时，电子设备可以根据上述的影响因素确定文本元素1506和搜索栏1507的动画效果。
示例性的，消息1503向下移动的速度越快，文本元素1506和搜索栏1507可以向下移动也可以越快。
示例性的，消息1503向下移动的距离越远，文本元素1506和搜索栏1507可以向下移动的距离也可以越远。
示例性的，消息1503的尺寸越大，文本元素1506和搜索栏1507可以向下移动也可以随着增加。例如，消息1503的尺寸为R1，消息1503向下移动的距离为d1，文本元素1506和搜索栏1507向下移动的距离可以是d2，若消息1503的尺寸变为R2，R2＞R1，消息1503向下移动的距离为d1，文本元素1506和搜索栏1507向下移动的距离可以是d3，则d3＞d2。
示例性的，文本元素1506和搜索栏1507尺寸越大，文本元素1506和搜索栏1507可以向下移动也可以随着增加。文本元素的尺寸可以文本的字号表征。
示例性的，若定义了文本元素1506和搜索栏1507的“摩擦力”，则电子设备可以使得文本元素1506和搜索栏1507的移动速度、移动距离满足任何包含“摩擦力”和“引力”的函数关系式。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定文本元素1506和搜索栏1507的动画效果。
在一些实施例中，为了体现文本元素1506和搜索栏1507与消息1503之间的联动，电子设备不仅可以使得文本元素1506和搜索栏1507随着消息1503的移动而移动，还可以使得文本元素1506和搜索栏1507的尺寸随着消息1503的移动而变大，从而可以显示如图15中的(e)所述的GUI。
可以理解的是，当文本元素1506和搜索栏1507复位时，其尺寸也可以恢复至原尺寸。
图14和图15示出了界面元素在通知界面、负一屏界面中的界面元素联动，本申请实施例对于应用场景不作限定。
图16示出了本申请实施例提供的一组GUI。
如图16中的(a)示出的是笔记界面，该笔记界面可以显示有多个笔记，当用户操作其中一个笔记时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(b)示出的是图库界面，该图库界面可以显示有多张图片，当用户操作其中一张图片时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(c)示出的是服务中心界面，该服务中心界面可以显示有多张应用程序卡片，当用户操作其中一张应用程序卡片时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(d)示出的是设置界面，该设置界面可以显示有多个设置选项，当用户操作其中一个设备选项时，其动画效果可以类似于图13和图14所示的动画效果。
图17示出了本申请实施例提供的一组GUI。
如图17中的(a)和(b)所示，电子设备显示有界面1701，该界面1701为消息通知界面，界面1701显示有消息1702、消息1703、消息1704、消息1705、消息1706。电子设备可以检测到用户向下滑动消息1704的操作，响应于该操作，电子设备可以使得消息1702、消息1703、消息1705、消息1706发生移动，具体描述可以参见上文，为了简洁，在此不再赘述。此外，电子设备可以响应于用户向下滑动的操作，由于消息1702已是最上方的消息，电子设备可以显示用于标识刷新的界面元素1708。
类似的，电子设备可以根据上文所述的影响因素确定界面元素1708的动画效果。
示例性的，如图17中的(b)和(c)所示，消息1704向下移动的距离越远，界面元素1708向下移动的距离也可以越远。
示例性的，如图17中的(b)和(c)所示，消息1704向下移动的距离越远，界面元素1708的尺寸可以越大。
示例性的，消息1704向下移动的速度越快，界面元素1708向下移动的速度也可以越快。
示例性的，消息1704向下移动的距离越远，由于界面元素1708是用于标识刷新的界面元素，则电子设备可以加快刷新速度。
示例性的，若界面元素1708可以转动，消息1704向下移动的速度越快，界面元素1708转动的速度可以越快。示例性的，若定义了界面元素1708的“摩擦力”，电子设备可以使得界面元素1708的移动距离、移动速度满足任何包含“摩擦力”和“引力”的函数关系式。
在上文针对图13至-图17的描述中，用户操作界面元素的方式是上下滑动，但本申请实施例并不限定于此，下面将结合图18介绍本申请实施例提供的界面显示的方法。
图18示出了本申请实施例提供的一组GUI。
如图18中的(a)所示，电子设备显示有界面1801，该界面1801可以是消息通知界面，该界面1801显示有消息1802、消息1803、消息1804、消息1805。针对界面1801，用户不仅可以上下滑动界面1801中的消息，还可以左右滑动界面1801中的消息。电子设备检测到用户向左滑动消息1803的操作，响应于该操作，电子设备可以使得消息1802、消息1804、消息1805发生移动。
在一些实施例中，消息1802、消息1804、消息1805的移动方向可以与消息1803的移动方向同向。
类似的，电子设备可以根据上文所述的影响因素确定消息1802、消息1804、消息1805的动画效果。
示例性的，如图18中的(b)所示，消息1802、消息1804、消息1805的移动方向可以与消息1803的移动方向同向，且由于消息1802、消息1804与消息1803之间的距离小于消息1805与消息1803之间的距离，则在相同时间内，电子设备可以使得消息1802和消息1804的移动距离大于消息1805的移动距离。
示例性的，若定义了消息1802、消息1804、消息1805的“摩擦力”，且上述3个消息的“摩擦力”不同，则上述3个消息的移动距离和/或移动速度可以不同。
示例性的，若消息1802、消息1803、消息1804的层级相同，消息1803与消息1804的层级不同，则消息1802和消息1804可以移动，而消息1805不会发生移动。
示例性的，若用户移动消息1803的速度加快，则电子设备可以使得消息1802、消息1804、消息1805的移动速度加快。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定消息1802、消息1804、消息1805的动画效果。
在一些实施例中，如图18中的(c)所示，随着用户继续向左滑动，由于边界的存在，消息1802、消息1804、消息1805可以不再随着消息1803的移动而移动，而消息1803随着用户继续向左滑动，可以逐渐消失在界面1801中。
在一些实施例中，如图18中的(c)所示，随着用户继续向左滑动消息1803，由于控件1806受到“引力”的影响移动，电子设备可以在界面1801上显示控件1806。
在一些实施例中，如图18中的(c)和(d)所示，消息1803和控件1806之间的距离在移动直至停止的过程中可以先变大再变小。
在另一些实施例中，消息1803和控件1806之间的距离在移动直至停止的过程中可以保持不变
类似的，电子设备可以根据上文所述的影响因素确定控件1806的动画效果。
示例性的，消息1803向左移动的速度越快，控件1808向左移动的速度也可以越快。
示例性的，若定义了控件1806的“摩擦力”，电子设备可以使得控件1806的移动距离、移动速度满足任何包含“摩擦力”和“引力”的函数关系式。
如图18中的(d)所示，随着用户继续向左滑动消息1803，由于控件1807受到“引力”的影响移动，电子设备可以在界面1801上显示控件1807。
应理解，针对控件1807的动画效果的描述，可以参见针对控件1806的描述，为了简洁，在此不再赘述。
在一些实施例中，如图18中的(e)所示，若控件1807是最右方的控件，随着用户继续向左滑动消息1803，控件1806和控件1807可以不再移动，但由于控件1806和控件1807受到“引力”的影响，控件1806和控件1807的尺寸可以变大。
在另一些实施中，若控件1807是最右方的控件，随着用户继续向左滑动消息1803，控件1806和控件1807可以继续移动，且消息1803与控件1806之间的距离以及消息1803与控件1807之间的距离可以变大，且控件1806和控件1807之间的距离也可以变大。
在一些实施例中，如图18中的(e)和(f)所示，随着用户继续向左滑动消息1803，控件1806的尺寸可以不再变大，控件1807的尺寸可以继续变大，且电子设备选中控件1807以执行该控件对应的功能。
在一些实施例中，受到“引力”影响的界面元素的显示内容与“引力”相关。例如，如图18中的(e)、(g)和(h)所示，随着用户继续向左滑动消息1803，控件1807显示的内容也可以发生变化，即图中所示的“垃圾箱”的开合角度增大。
在一些实施例中，如图18中的(f)、(i)和(j)所示，当电子设备执行控件1907对应的功能后，消息1803被删除，消息1804和消息1805仍可以受到“引力”的影响向上移动，由于消息1803被删除，可以将消息1802作为产生“引力”的界面元素，消息1804和消息1805的移动动画效果受到上文所述的因素的影响，示例性的，由于消息1804与消息1802之间的距离小于消息1805与消息1802之间的距离，则消息1804的移动速度可以快于消息1805的移动速度，则消息1804可以先于消息1805到达目的位置。
针对上述过程的位移时间曲线和间距时间曲线类似于图14中的(e)和(f)，为了简洁，在此不再赘述。
图18示出了界面元素在消息通知界面的界面元素联动，本申请实施例对于应用场景不作限定。
图19示出了本申请实施例提供的一组GUI。
如图19中的(a)所示，电子设备可以在锁屏界面显示有消息，当用户可以左右滑动该锁屏界面的消息，其动画效果可以类似于图18所示的动画效果。
如图19中的(b)所示，电子设备显示有录音机界面，该录音机界面可以显示多个录音，当用户左右滑动该界面显示的录音，其动画效果可以类似于图18所示的动画效果。
如图19中的(c)所示，电子设备显示有最近使用界面，该最近使用界面可以显示多个应用程序对应的卡片，用户可以左右滑动该界面显示的卡片，其动画效果可以类似于图18所示的动画效果。
如图19中的(d)所示，电子设备显示有通话界面，该通话界面可以显示通话记录，用户可以左右滑动该界面显示的通话记录，其动画效果可以类似于图18所示的动画效果。
如图19中的(e)所示，电子设备显示有天气界面，该天气界面可以显示多个城市天气，用户可以左右滑动该界面显示的天气，其动画效果可以类似于图18所示的动画效果。
如图19中的(f)所示，电子设备显示有待办事项界面，该待办事项界面可以显示多个待办事项，用户可以左右滑动该界面显示的待办事项，其动画效果可以类似于图18所示的动画效果。
图20示出了本申请实施例提供的一组GUI。
如图20中的(a)-(b)所示，电子设备显示有界面2001，电子设备可以在界面2001上显示应用图标2002、应用图标2003、应用图标2004、应用图标2005、文件夹2006、应用图标2007，当用户点击文件夹2006时，电子设备可以展开该文件夹2006，由于该文件夹的尺寸变大，对于应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007的“引力”增强，则应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007可以向着文件夹2006的方向移动一段距离后返回原位置。
在另一些实施例中，应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007可以先向着文件夹2006远离的方向移动一段距离后返回原位置。
图21示出了本申请实施例提供的一组GUI。
如图21中的(a)所示，电子设备显示有界面2101，该界面2101显示有应用图标2102、应用图标2103、应用图标2104、应用图标2105、应用图标2106、应用图标2107、应用图标2108、应用图标2109、应用图标2110、应用图标2111、应用图标2112、应用图标1213、应用图标2114。
如图21中的(a)和(b)所示，电子设备检测到用户按压应用图标2108，则电子设备可以使得受到应用图标2108的“引力”影响的应用图标发生移动，即应用图标2102、应用图标2103、应用图标2104、应用图标2105发生移动。
在一些实施例中，如图21中的(b)和(c)所示，应用图标2102、应用图标2103、应用图标2104、应用图标2105可以移动至于应用图标2108合并，且将应用图标2108变更为文件夹2115，该文件夹2115中包括应用图标2102、应用图标2103、应用图标2104、应用图标2105、应用图标2108。
需要说明的是，上述针对应用图标2102、应用图标2103、应用图标2104、应用图标2105移动的过程以及确定受到应用图标2108的“引力”影响的应用图标的详细描述可以参见上文，示例性的，由于应用图标2104距离应用图标2108的距离最近，则应用图标2104可以最先与应用图标2108合并，类似地，应用图标2103和应用图标2105可以同时与应用图标2108合并，应用图标2102最后与应用图标2108合并。
图22示出了根据本申请实施例的联动动画效果相关联的联动框架与界面之间的关系的示意图，该界面可以是***界面，也可以是第三方应用程序的界面。如图22所示，联动框架2202可以提供动画效果能力2204。动画效果能力2204可以采用AAR形式2206、JAR形式2208和***接口2210。界面2214可以对界面元素实现各种操作，例如移动操作2216、合并操作2218、展开操作2220、删除操作2222和其他操作2224。界面2214可以通过集成2212的方式来使用联动框架动效2202提供的引力动效能力2204。尽管图22中未示出，但是界面2214也可以通过调用(例如，***接口2210)的方式来使用联动框架2202提供的动画效果能力2204。也就是说，联动框架可以采用AAR、JAR、***接口的形式来提供动画效果的能力，界面2214集成之后可以应用在领域内需要的各种场景。
图23示出了根据本申请实施例的用于实现动画效果能力或功能的***框架的示意图。在一些实施例中，联动框架的动效能力的是基于电子设备的操作***(例如，安卓或者鸿蒙)的整体架构来实现的，可以包含主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户可以主要在应用程序层使用和体验动效的功能。在本申请实施例中，界面和联动框架的能力交互关系如图23所描绘。具体地，如图23所示，该***框架可以包括应用程序层2310、应用程序框架层2330、硬件抽象层2350、以及内核层2370。应用程序层2310可以包括界面2312。界面2312上可以实现界面元素操作2314。联动2314例如可以包括启动联动、联动运动、联动完成。应用程序框架层2330可以包括***服务2332和扩展服务2334。***服务2332可以包括各种***服务，例如Service 2333。扩展服务2334可以包括各种扩展服务，例如HwSDK 2335。硬件抽象层(HAL)2350可以包括HAL3.0 2352和算法2354，本申请实施例对于算法不作限定。内核层2370可以包括驱动2372和物理设备2374。物理设备2374可以向驱动2372提供原始参数流，而驱动2372可以向物理设备2374提供功能处理参数流。如图23进一步示出的，用于实现动画效果能力2325的联动框架2321可以实现在应用程序层2310与应用程序框架层2330之间。联动框架2321可以包括平台能力2322和***能力2324，两者可以用于提供动画效果2325。画效果2325进而可以提供给应用程序层2310的界面元素操作2314。
图24示出了根据本申请实施例的联动动画效果能力或功能实现的三种方式的具体说明的示意图。如图24所示，AAR格式2401与电子设备的***之间的关系2402为：AAR格式2401是以二进制方式的能力打包的，提供给***中应用侧集成的能力，可以自由控制版本节奏，不跟随***。JAR格式2403与电子设备的***之间的关系2404为：JAR格式2403是以二进制方式的能力打包的，提供给***中所有部件的能力，可以自由控制版本节奏，不跟随***。***接口2405与电子设备的***之间的关系2406为：***接口2405是***版本中的框架层的接口，提供给***中所有部件的能力，跟随***升级。更具体地，集成方式可以是指AAR和JAR包的方式，调用方式可以是指***接口的方式。因此，本申请实施例应用的场景是不限于任何特定场景的，只是联动动画效果的能力的展现方式可能不一致。也就是说，本申请前文描述的各种方法的功能可以通过AAR格式文件、JAR格式文件和/或电子设备的***接口来实现。以此方式，联动动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序。
下面将介绍本申请实施例联动框架的相关设置。
表1为本申请实施例提供的联动场景表。
表1联动场景表
序号 联动场景
1 上下联动场景
2 左右联动场景
3 拖拽联动场景
4 增删联动场景
5 多向联动场景
上下联动场景可以理解为用户在操作界面元素时会采用上下滑动的操作方式。例如，如图15-17所示的GUI。
左右联动场景可以理解为用户在操作界面元素时会采用左右滑动的操作方式。例如，如图18-19所示的GUI。
拖拽联动场景可以理解为用户在操作界面元素时会采用拖拽的操作方式，对于拖拽方向不作限定。例如，如图4所示的GUI。
增删联动场景可以理解为用户在操作界面元素时可以通过滑动操作删除或增加界面元素。例如，如图18中的所示的GUI。
多向联动场景可以理解为界面元素产生的“引力”的方向不仅包括平面方向，还包括深度方向，深度方向是指与电子设备屏幕垂直的方向。
需要说明的是，对于同一个界面，可以同时存在多个联动场景。例如，如图18所示的GUI，用户既可以左右滑动界面中的消息，也可以左右滑动直至删除界面中的消息，即图18所示的GU既包括了左右联动场景，还包括了增删联动场景。
表2为本申请实施例提供的联动模型表。
表2联动模型表
序号 联动模型
1 引力模型
2 压力模型
3 重力模型
4 摩擦力模型
5 自定义模型
本申请实施例中的联动框架可以包括多个模型，其中自定义模型可以是由开发者自定义的，开发者可以通过自定义模型影响界面元素的移动。
例如，联动框架包括引力模型和摩擦力模型，则电子设备在确定界面元素的动画效果时，可以基于界面元素的受到的“引力”和“摩擦力”确定界面元素的动画效果。
表3为本申请实施例提供的动画效果参数。
表3动画参数表
序号 动画参数
1 刷新频率
2 屏幕大小
3 屏幕比例
4 性能
5 时长
6 插值器
7 变化幅度范围
8 自定义
本申请实施例中可以通过改变动画参数以调整动画效果的实现细节，例如，电子设备的屏幕大，动画效果的变化幅度也可以增大，以保证用户可以看清动画效果的细节。
需要说明的是，上述动画参数表仅为示例，本申请实施例中的动画参数可以包括上述部分或全部的参数，还可以包括其他参数，例如屏幕材质。
表1所示的联动场景表以及表2所示的联动模型表，针对表1中的部分或全部联动场景，表2中的部分或全部联动模型，本申请实施例还针对不同的联动场景和不同的联动模型提供了不同的参数设置。
例如，表4所示为上下联动场景的参数配置。
表4上下联动参数表
其中，联动范围可以理解为上下联动中产生联动的范围，本申请实施中可以通过联动范围参数确定在上下联动场景中发生联动的界面元素。
联动幅度可以理解为上下联动中界面元素移动时的幅度，本申请实施中可以通过联动幅度参数确定在上下联动场景中界面元素移动的距离。
联动时间可以理解为界面元素的移动时间，本申请实施中可以通过联动时间参数确定在上下联动场景中界面元素移动的时间。
联动时延可以理解为界面元素延时移动的时间，本申请实施中可以通过联动时延参数确定每一个界面元素开始移动的时间。
移动速度为界面元素在移动过程中的移动速度，移动速度可以是固定的值，也可以是函数关系式，本申请实施例对此不作限定。
加速度为界面元素在移动过程中的加速度，移动速度可以是固定的值，也可以是函数关系式，本申请实施例对此不作限定。
需要说明的是，上述上下联动参数表仅为示例，本申请实施例中的上下联动参数可以包括上述部分或全部的参数，还可以包括其他参数。
还需要说明的是，上下联动场景中可以引入表2中的一个或多个模型，从而上下联动参数表还可以包括一个或多个模型参数，例如，上下联动场景中引入了“引力”模型，则上下联动参数表中还可以包括表5所示的参数。
再例如，表5所示为引力模型的参数配置。
表5引力模型参数表
序号 动画参数
1 时间
2 范围
3 影响因子
4 大小
其中，时间参数可以指示产生“引力”的时间。范围参数可以指示“引力”的范围。影响因子可以影响“引力”的大小，范围参数、时间参数等。
在一些实施例中，本申请实施例中，可以将其他联动模型量化为影响因子，从而电子设备可以通过影响因子改变引力模型中的参数，进而确定界面元素的动画效果。
电子设备在启动联动时，可以确定上述的联动框架的相关设置，然后联动运动时解析上述联动框架中的相关设置以确定界面元素的动画效果，从而可以完成联动。
上文介绍了界面元素的动画效果，联动场景、联动框架设置等，下面将介绍本申请实施例提供的界面显示方法的示意性流程图。
图25示出了本申请实施例提供的界面显示方法的示意性流程图，如图25所示，该方法包括：
S2501，显示第一界面。
示例性的，电子设备可以显示第一界面，该界面包括M个界面元素，M＞1且为整数。
例如，如图4所示，电子设备可以界面401，界面401显示有多个应用图标。
再例如，如图14所示，电子设备显示有负一屏1401，负一屏1401显示有多个卡片。
S2502，检测到用户的操作，确定第一界面元素。
在一些实施例中，检测到用户的操作，确定第一界面元素，包括：
电子设备检测到用户针对M个界面元素中的任意一个界面元素的操作，将该任意一个界面元素确定为所述第一界面元素
例如，如图4中的(a)所示的用户向下拖动界面元素。
再例如，如图4中的(b)所示的用户点击界面元素。
在另一些实施例中，检测到用户的手势操作，根据M个界面元素的每一个界面元素的类型确定第一界面元素。
在上述示例中，用户操作一个界面元素，将该界面元素确定为第一界面元素，但本申请实施例并不限定于此，示例性的，用户可以通过手势操作在第一界面的空白处滑动以刷新第一界面，即此时用户并没有针对某个界面元素进行操作，则电子设备可以根据第一界面中的每一个界面元素的类型，例如将第一界面中的层级最高的界面元素作为产生“引力”的界面元素，则其他界面元素可以受到“引力”的影响而发生联动。
S2503，根据第一界面元素的类型，确定N个受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个受到第一界面元素影响的界面元素，包括：
根据第一界面元素的类型，确定N个与第一界面元素的类型相同的的界面元素为受到第一界面元素影响的界面元素。
示例性的，电子设备确定第一界面元素的类型后，可以将N个与第一界面元素类型相同的界面元素确定为受到第一界面元素影响的界面元素，1≤N≤M-1，该N个受到第一界面元素影响的界面元素包括第二界面元素。
在另一些实施例中，根据第一界面元素的类型，确定N个界面元素，包括：
根据第一界面元素的类型，确定N个与第一界面元素的类型不相同的界面元素为受到第一界面元素影响的界面元素。
示例性的，电子设备确定第一界面元素的类型后，可以将N个与第一界面元素类型不相同的界面元素确定为受到第一界面元素影响的界面元素。
类型不相同可以理解为层级不相同、颜色不相同、尺寸不相同等。
在一些实施例中，根据第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素，包括：
电子设备可以确定第一界面元素中的除第一界面元素以外的所有界面元素为受到第一界面元素影响的界面元素，即第一界面中的所有界面元素为同一个类型的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以根据第一界面元素的层级，确定N个与第一界面元素层级相同的界面元素为受到第一界面元素影响的界面元素，即第一界面中的层级相同的界面元素为同一个类型的界面元素。
例如，电子设备可以将与第一界面元素的层级相同的界面元素确定为受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以根据第一界面元素的尺寸，确定N个与第一界面元素尺寸相同的界面元素为受到第一界面元素影响的界面元素，即第一界面中的尺寸相同的界面元素为同一个类型的界面元素。
例如，电子设备可以将与第一界面元素的尺寸相同的界面元素确定为受到第一界面元素影响的界面元素。
再例如，电子设备可以将与第一界面元素的尺寸相同，或与第一界面元素的尺寸差值小于阈值的界面元素确定为受到第一界面元素影响的界面元素。
在一些实施例中，若用户针对第一界面元素的操作是移动界面元素的操作，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备确定第一界面元素的移动的第一方向；
电子设备根据第一方向确定N个在第一界面元素的第一方向的界面元素为受到第一界面元素影响的界面元素；或
电子设备根据第二方向确定N个在第一界面元素的第二方向的界面元素为受到第一界面元素影响的界面元素，其中第二方向为第一方向的相反方向。
例如，第一界面元素的移动方向为向左移动，则电子设备可以将第一界面元素的左侧的界面元素确定与第一界面元素类型相同的界面元素。第一界面元素的左侧的界面元素可以包括第一界面元素正左侧的界面元素，还可以包括第一界面元素左上方和/或左下方的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备根据第一界面元素的颜色，确定N个与第一界面元素颜色相同的界面元素为受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以确定第一界面元素与M-1个界面元素之间的距离，并根据第一界面元素与M-1个界面元素之间的距离确定N个与所述第一界面元素类型相同的界面元素为受到第一界面元素影响的界面元素，即在预设距离内的界面元素为第一界面元素的相同类型的界面元素。
例如，电子设备可以确定第一界面元素与M-1个界面元素之间的距离，然后将与第一界面元素之间的距离小于第一阈值的界面元素确定为受到第一界面元素影响的界面元素。
需要说明的是，本申请实施例对于距离的测量方式不作限定，具体描述可以参见上文针对图7的描述。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以确定第一界面元素的发生中心点，然后根据发生中心点确定第一几何区域，将第一几何区域包覆和/或与第一几何区域的边界相交的N个界面元素确定为受到第一界面元素影响的界面元素。
例如，如图7中的(e)-(g)所示，电子设备可以以界面元素的几何中心点为中心点，选取几何区域，将几何区域包覆和/或与几何区域的边界相交的界面元素确定为受到界面元素影响的界面元素。几何区域包覆可以理解为界面元素完全在几何区域内。
S2504，根据第一联动参数，确定第二界面元素的第一动画效果。
示例性的，电子设备可以根据第一联动参数，确定第二界面元素的第一动画效果，该动画效果包括第二界面元素的移动距离以及移动时的状态。本申请实施例中的联动参数包括以下中的至少一项：第一界面元素的尺寸、第二界面元素的尺寸、第一界面元素与第二界面元素之间的距离、第二界面元素的限制参数、第一界面元素的动画效果。第二界面元素的限制参数可以是电子设备设定的限制第二界面元素移动的参数。例如，第二界面元素的限制可以是第二界面元素的“摩擦力”和/或“重力”。
S2505，根据第一动画效果移动移动第二界面元素。
示例性的，电子设备在确定动画效果后，可以根据动画效果移动第二界面元素。
可以理解的是，由于动画效果是根据上述联动参数确定的，则针对同一界面的不同受到第一界面元素影响的节目元素，其动画效果可以是不同的。
在一些实施例中，在S2505之前，该方法还包括：
确定第一延迟时间；
示例性的，电子设备可以确定延迟时间，该延迟时间为第一界面***作与第二界面元素开始移动之间的时间差。例如，第一界面元素被点击经过1s后，第二界面元素开始移动。
在一些实施例中，第一延迟时间可以是预配置的。
在另一些实施例中，第一延时时间可以是根据第一界面元素与第二界面元素之间的距离确定的。例如，第一界面元素与第二界面元素之间的距离为D1时，第一延迟时间可以是T1，第一界面元素与第二界面元素之间的距离为D2时，第一延迟时间可以是T2。
在一些实施例中，根据第一动画效果移动第二界面元素，包括：
在经过第一延迟时间后，根据第一动画效果移动移动第二界面元素。
在一些实施例中，第二界面元素的动画效果的位移时间变化的曲线可以是贝塞尔曲线或弹性力曲线，
在一些实施例中，该方法还包括：
若用户针对第一界面元素的操作为按压操作或点击操作，所述方法还包括：
响应于该操作，改变第一界面元素的尺寸。
在一些实施例中，该方法还包括：
第一联动参数还包括用户执行操作的压力。
在一些实施例中，该方法还包括：
若检测到电子设备的类型由第一类型变为第二类型或电子设备的屏幕参数发生变化，将第一动画效果切换为第三动画效果；
根据第一动画效果移动第二界面元素，包括：：
根据第三动画效果移动第二界面元素。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时或确定为产生引力影响的界面元素时，可以与其他界面元素关联，使得其他界面元素发生联动，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
本申请实施例还提供了一种电子设备，包括用于实现上述方法实施例涉及的各步骤的功能模块。需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。本申请实施例提供的电子设备，用于执行上述界面显示的方法，因此可以达到与上述相同的效果。
本申请实施例还提供了一种电子设备，包括：处理器、存储器、应用程序以及计算机程序。上述各器件可以通过一个或多个通信总线连接。其中，该一个或多个计算机程序被存储在上述存储器中并被配置为被该一个或多个处理器执行，该一个或多个计算机程序包括指令，上述指令可以用于使电子设备执行上述各实施例中电子设备的各个步骤。
示例性的，上述处理器具体可以为图1所示的处理器110，上述存储器具体可以为图1所示的内部存储器120和/或与电子设备连接的外部存储器。
本申请实施例还提供一种芯片，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如前文中任一种可能的实现方式中所述的界面显示的方法被执行。
本实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的界面显示的方法。
本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面显示的方法。
以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (21)

1.一种界面显示的方法，其特征在于，所述方法包括：
显示第一界面，所述第一界面包括M个界面元素，M＞1且为整数；
检测到用户的操作，确定第一界面元素；
根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，所述N个受到所述第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M-1，且为整数；
根据第一联动参数，确定所述第二界面元素的第一动画效果，其中所述第一联动参数包括所述以下中的至少一项：所述第一界面元素的尺寸、所述第二界面元素的尺寸、所述第一界面元素与所述第二界面元素之间的距离、所述第二界面元素的限制参数，所述第一界面元素的动画效果；
根据所述第一动画效果移动所述第二界面元素。
2.根据权利要求1所述的方法，其特征在于，所述检测到用户的操作，确定第一界面元素，包括：
检测到用户针对所述M个界面元素中的任意一个界面元素的操作，将所述任意一个界面元素确定为所述第一界面元素。
3.根据权利要求1所述的方法，其特征在于，所述检测到用户的操作，确定第一界面元素，包括：
检测到用户的手势操作，根据所述M个界面元素的每一个界面元素的类型确定第一界面元素。
4.根据权利要求1至3中任一项所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，包括：
根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素。
5.根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为所述第一界面元素影响的界面元素，包括：
根据所述第一界面元素的层级，确定N个与所述第一界面元素层级相同的界面元素为受到所述第一界面元素影响的界面元素。
6.根据权利要求5所述的方法，其特征在于，所述方法还包括：
根据所述第一界面元素的层级确定第三界面元素，其中，所述第三界面元素的层级与所述第一界面元素的层级不相同；
根据第二联动参数，确定所述第三界面元素的第二动画效果，其中所述第二联动参数包括所述以下中的至少一项：所述第一界面元素的尺寸、所述第三界面元素的尺寸、所述第一界面元素与所述第三界面元素之间的距离、第三界面元素的限制参数、所述第一界面元素的动画效果；
根据所述第二动画效果移动所述第三界面元素。
7.根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素，包括：
根据所述第一界面元素的颜色，确定N个与所述第一界面元素颜色相同的界面元素为受到所述第一界面元素影响的界面元素。
8.根据权利要求2所述的方法，其特征在于，若所述操作为移动操作，所述根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，包括：
确定所述第一界面元素的移动的第一方向；
根据所述第一方向确定N个在所述第一界面元素的第一方向的界面元素为受到所述第一界面元素影响的界面元素；或
根据第二方向确定N个在所述第一界面元素的第二方向的界面元素为受到所述第一界面元素影响的界面元素，其中所述第二方向为所述第一方向的相反方向。
9.根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素，包括：
确定所述第一界面元素的发生中心点；
根据所述发生中心点，确定第一几何区域，将所述第一几何区域覆盖或与所述第一几何区域的边界相交的N个界面元素确定为受到所述第一界面元素影响的界面元素。
10.根据权利要求2所述的方法，其特征在于，若所述操作为按压操作或点击操作，所述方法还包括：
响应于所述操作，改变所述第一界面元素的尺寸。
11.根据权利要求10所述的方法，其特征在于，所述第一联动参数还包括所述用户执行所述操作的压力。
12.根据权利要求1至11中任一项所述的方法，其特征在于，在所述根据所述效果移动所述第二界面元素之前，所述方法还包括：
确定第一延迟时间；
所述根据所述第一动画效果移动所述第二界面元素，包括：
在经过所述第一延迟时间后，根据所述第一动画效果移动所述第二界面元素。
13.根据权利要求12所述的方法，其特征在于，所述确定第一延迟时间，包括：
根据所述第一界面元素和所述第二界面元素之间的距离确定所述第一延迟时间。
14.根据权利要求12所述的方法，其特征在于，所述第一延迟时间是预配置的。
15.根据权利要求1至14中任一项所述的方法，其特征在于，所述方法还包括：
所述第二界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线，其中，所述弹性力曲线包括临界阻尼弹性力曲线、过阻尼弹性力曲线、欠阻尼弹性力曲线。
16.根据权利要求1至15中任一项所述的方法，其特征在于，所述方法还包括：
若检测到所述电子设备的类型由第一类型变为第二类型或所述电子设备的屏幕参数发生变化，将所述第一动画效果切换为第三动画效果；
所述根据所述第一动画效果移动所述第二界面元素，包括：：
根据所述第三动画效果移动所述第二界面元素。
17.一种电子设备，其特征在于，包括：用于实现如权利要求1至16中任一项所述的方法的模块。
18.一种电子设备，其特征在于，包括一个或多个处理器；一个或多个存储器；所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得如权利要求1至16中任一项所述的方法被执行。
19.一种芯片，其特征在于，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如权利要求1至16中任一项所述的方法被执行。
20.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机指令，当所述计算机指令在计算机上运行时，使得如权利要求1至16中任一项所述的方法被执行。
21.一种包含指令的计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1至16中任一项所述的方法。
CN202210871034.2A 2022-07-22 2022-07-22 一种界面显示的方法以及电子设备 Pending CN117472485A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202210871034.2A CN117472485A (zh) 2022-07-22 2022-07-22 一种界面显示的方法以及电子设备
PCT/CN2023/107682 WO2024017185A1 (zh) 2022-07-22 2023-07-17 一种界面显示的方法以及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210871034.2A CN117472485A (zh) 2022-07-22 2022-07-22 一种界面显示的方法以及电子设备

Publications (1)

Publication Number Publication Date
CN117472485A true CN117472485A (zh) 2024-01-30

Family

ID=89617150

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210871034.2A Pending CN117472485A (zh) 2022-07-22 2022-07-22 一种界面显示的方法以及电子设备

Country Status (2)

Country Link
CN (1) CN117472485A (zh)
WO (1) WO2024017185A1 (zh)

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104461256A (zh) * 2014-12-30 2015-03-25 广州视源电子科技股份有限公司 界面元素显示方法和***
CN110876067B (zh) * 2018-08-31 2023-03-21 广州虎牙信息科技有限公司 界面元素的显示方法、装置、设备及存储介质
CN115469781B (zh) * 2021-04-20 2023-09-01 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN115964106B (zh) * 2021-04-20 2024-02-13 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Also Published As

Publication number Publication date
WO2024017185A1 (zh) 2024-01-25

Similar Documents

Publication Publication Date Title
US11244170B2 (en) Scene segmentation method and device, and storage medium
US11914850B2 (en) User profile picture generation method and electronic device
CN115469781B (zh) 图形界面显示方法、电子设备、介质以及程序产品
WO2021218364A1 (zh) 一种图像增强方法及电子设备
CN114866860B (zh) 一种播放视频的方法及电子设备
CN113837920B (zh) 一种图像渲染方法及电子设备
WO2021180046A1 (zh) 图像留色方法及设备
CN111553846A (zh) 超分辨率处理方法及装置
WO2022247541A1 (zh) 一种应用程序动效衔接的方法及装置
CN117472485A (zh) 一种界面显示的方法以及电子设备
CN117769696A (zh) 显示方法、电子设备、存储介质和程序产品
CN117472482A (zh) 一种界面切换的显示方法以及电子设备
CN111722896A (zh) 动画播放方法、装置、终端以及计算机可读存储介质
WO2023130977A1 (zh) 用户界面显示方法、电子设备、介质以及程序产品
US20230351665A1 (en) Animation Processing Method and Related Apparatus
WO2023280021A1 (zh) 一种生成主题壁纸的方法及电子设备
WO2024099206A1 (zh) 一种图形界面处理方法以及装置
US20240064397A1 (en) Video Shooting Method and Electronic Device
CN117850925A (zh) 一种服务联动的方法以及电子设备
CN116206040A (zh) 一种获取ao贴图的方法及装置
CN117850643A (zh) 一种***、歌单生成方法以及电子设备
CN117459825A (zh) 一种拍摄方法和电子设备
CN115484498A (zh) 一种播放视频的方法及装置
CN117806744A (zh) 控件显示方法及电子设备
CN118069262A (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