CN117472482A

CN117472482A - 一种界面切换的显示方法以及电子设备

Info

Publication number: CN117472482A
Application number: CN202210867784.2A
Authority: CN
Inventors: 卞超
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2022-07-22
Filing date: 2022-07-22
Publication date: 2024-01-30
Also published as: WO2024017183A1

Abstract

本申请提供了一种界面切换的显示方法，方法包括：电子设备显示第一界面，第一界面包括M个界面元素，M≥1且为整数；电子设备检测到用户切换第二界面的操作，第二界面包括N个界面元素，N≥1且为整数；电子设备响应于所述操作，根据M个界面元素和N个界面元素确定第一联动切换动画效果；电子设备根据第一联动切换动画效果将第一界面切换至第二界面。通过本申请，当电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。

Description

一种界面切换的显示方法以及电子设备

技术领域

本申请涉及电子设备领域，并且更具体地，涉及一种界面切换的显示方法以及电子设备。

背景技术

随着技术的进步，各种类型的电子设备配置有各种类型的屏幕，其中界面中各种界面元素的显示效果是影响用户体验的重要因素。目前，在进行界面切换时的界面切换效果是固定的，效果十分单一，用户缺乏真实的感受。

发明内容

本申请实施例提供一种界面切换的显示方法以及电子设备，使得电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果。

第一方面，提供了一种一种界面切换的显示方法，其特征在于，该方法包括：电子设备显示第一界面，该第一界面包括M个界面元素，M≥1且为整数；该电子设备检测到用户切换第二界面的操作，该第二界面包括N个界面元素，N≥1且为整数；该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果；该电子设备根据该第一联动切换动画效果将该第一界面切换至该第二界面。

本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。

结合第一方面，在第一方面的某些实现方式中，该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果，包括：该电子设备根据该M个界面元素确定第一主界面元素和该第一主界面元素的位置；该电子设备根据该N个界面元素确定第二主界面元素、该第二主界面元素的位置、N-1个次界面元素；该电子设备根据该第一主界面元素的位置和该第二主界面元素的位置确定第二主界面元素的动画效果；该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果。

结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果，包括：该电子设备根据第一界面切换参数确定该每一个次界面元素的动画效果，其中该第一界面切换参数包括以下中的至少一项：该第二主界面元素的尺寸、该每一个次界面元素的尺寸、该第二主界面元素与该每一个次界面元素之间的距离、该每一个次界面元素的限制参数、该第二主界面元素的动画效果。

结合第一方面，在第一方面的某些实现方式中，该电子设备根据该M个界面元素确定第一主界面元素和该第一主界面元素的位置，包括：该电子设备根据该第一界面的视觉中心确定该第一主界面元素和该第一主界面元素的位置；该电子设备根据该N个界面元素确定第二主界面元素和该第二主界面元素的位置，包括：该电子设备根据该第二界面的视觉中心确定该第二主界面元素和该第二主界面元素的位置。

结合第一方面，在第一方面的某些实现方式中，该每一个次界面元素的动画效果包括该每一个次界面元素的移动轨迹和/或该每一个次界面元素的移动速度，其中该每一个次界面元素的移动轨迹是弯曲的。

结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第一主界面元素的位置和该第二主界面元素的位置确定第二主界面元素的动画效果，包括：该电子设备根据该第一主界面元素的位置和该第二主界面元素的位置确定该第二主界面元素的移动轨迹和该第二主界面的移动速度。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：该电子设备根据该M个界面元素确定M-1个次界面元素；该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果，包括：该电子设备根据该第二主界面元素、该N-1个次界面元素中的每一个次界面元素、该M-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果。

结合第一方面，在第一方面的某些实现方式中，该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果，包括：该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，其中L≥1且为整数；该电子设备确定该L个类型的界面元素的每一个类型的界面元素在该第一界面和该第二界面的位置；该电子设备在该第二界面中确定第一位置集，该第一位置集包括该第二界面中的任意的一个或多个位置；该电子设备根据该第一位置集、该每一个类型的界面元素在该第一界面的位置和该每一个类型的界面元素在该第二界面的位置确定该N个界面元素的动画效果。

结合第一方面，在第一方面的某些实现方式中，该第一位置集包括的一个或多个位置为该N个界面元素中的一个或多个界面元素在该第二界面对应的位置。

结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第一位置集、该每一个类型的界面元素在该第一界面的位置和该每一个类型的界面元素在该第二界面的位置确定该N个界面元素的动画效果，包括：该电子设备根据第二界面切换参数确定该N个界面元素的动画效果，其中该第二界面切换参数包括以下中的至少一项：该一个或多个界面元素的尺寸、该每一个类型的界面元素的尺寸、该第一位置集中的一个或多个位置与该每一个类型的界面元素之间的距离、该每一个类型的界面元素的限制参数、该第一界面元素的动画效果。

结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备根据相似度将该M个界面元素和该N个界面元素划分为L个类型的界面元素。

结合第一方面，在第一方面的某些实现方式中，该相似度包括颜色相似度、尺寸相似度、形状相似度。

结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备确定该M个界面元素在该第一界面的位置和该N个界面元素在该第二界面的位置；该电子设备根据该M个界面元素在该第一界面的位置和该N个界面元素在该第二界面的位置将该M个界面元素和该N个界面元素划分为L个类型的界面元素。

结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备确定该M个界面元素和该N个界面元素的标签；该电子设备根据该M个界面元素和该N个界面元素的标签将该M个界面元素和该N个界面元素划分为L个类型的界面元素。

结合第一方面，在第一方面的某些实现方式中，该N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。

结合第一方面，在第一方面的某些实现方式中，该方法通过AAR格式文件、JAR格式文件或该电子设备的***接口中的至少一项来实现。

结合第一方面，在第一方面的某些实现方式中，该方法还包括：若检测到该电子设备的类型由第一类型变为第二类型，将该第一联动切换效果切换为第二联动切换效果；该电子设备根据该第一联动切换动画效果将该第一界面切换至该第二界面，包括：该电子设备根据该第二联动切换动画效果将该第一界面切换至该第二界面。

第二方面，为本申请实施例的一种电子设备，该电子设备包括执行上述方面或者上述方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。

第三方面，为本申请实施例的一种芯片，该芯片与电子设备中的存储器耦合，用于调用存储器中存储的计算机程序并执行本申请实施例上述方面及其上述方面任一可能设计的技术方案；本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。

第四方面，为本申请实施例的一种计算机可读存储介质，该计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得该电子设备执行如上述方面及其上述方面任一可能设计的技术方案。

第五方面，为本申请实施例的一种计算机程序，该计算机程序包括指令，当该指令在计算机上运行时，使得该计算机执行如上述方面及其上述方面任一可能设计的技术方案。

第六方面，为本申请实施例的一种电子设备上的图形用户界面，该电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，该一个或多个处理器用于执行存储在该一个或多个存储器中的一个或多个计算机程序，该图形用户界面包括该电子设备执行上述方面及其上述方面任一可能设计的技术方案时显示的图形用户界面。

第七方面，为本申请实施例的一种电子设备，该电子设备包括一个或多个处理器；一个或多个存储器；该一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得电子设备执行如上述方面及其上述方面任一可能设计的技术方案。

其中，第二方面至第七方面的有益效果，请参见上述方面的有益效果，不重复赘述。

附图说明

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

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

图3是本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。

图4是本申请实施例提供的受到“引力”影响的界面元素的移动示意图。

图5是本申请实施例提供的将界面元素划分为主界面元素和次界面元素的示意图。

图6是本申请实施例提供的根据界面元素在界面中的位置划分界面元素的类型的示意图。

图7是本申请实施例提供的根据界面元素的标签划分界面元素的类型的示意图。

图8是本申请实施例提供的界面切换时的动画效果的示意图。

图9是本申请实施例提供的界面切换时的动画效果的示意图。

图10是本申请实施例提供的确定界面元素之间的距离的示意图。

图11是本申请实施例提供的不同距离界面元素界面切换时的动画效果的示意图。

图12是本申请实施例提供的不同尺寸的界面元素界面切换时的动画效果的示意图。

图13是本申请实施例提供的位移时间曲线的示意图。

图14是本申请实施例提供的界面切换时的动画效果示意图。

图15是本申请实施例提供的界面切换时的动画效果示意图。

图16是本申请实施例提供的一种界面切换的形式的示意图。

图17是本申请实施例提供的另一种界面切换的形式的示意图。

图18是本申请实施例提供的另一种界面切换的形式的示意图。

图19是本申请实施例提供的一组GUI。

图20是本申请实施例提供的一组GUI。

图21是本申请实施例提供的一组GUI。

图22是本申请实施例提供的一组GUI。

图23是本申请实施例的界面切换的动画效果的动画过程和相关控制逻辑的示意图。

图24是本申请实施例提供的位移时间曲线的示意图。

图25是本申请实施例的界面切换的动画效果相关联的界面切换框架与应用侧之间的关系的示意图。

图26是本申请实施例的用于实现动画效果能力或功能的***框架的示意图。

图27是本申请实施例的界面切换的动画效果能力或功能实现的三种方式的具体说明的示意图。

图28是本申请实施例提供的界面切换的显示方法的示意性流程图。

具体实施方式

以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，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示出了根据本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。图3中的(a)示出了移动的界面元素的“引力”作用为“吸引力”的示例场景。图3中的(a)所示，右下方的十字图形示意性地表示移动的界面元素的放大的“引力”中心点。另外，在图3中的(a)中，左上方的十字图形示意性地表示受到移动的界面元素的“引力”影响的另一界面元素的放大的一点。在“引力”动画效果被设置为“吸引力”的情况下，在“吸引力”的作用下，该界面元素的受到“引力”的方向为每个受到影响的界面元素的元素中心点指向移动的界面元素的发生中心点的矢量方向。类似地，图3中的(b)示出了移动的界面元素的“引力”作用为“排斥力”的示例场景。如图3中的(b)所示，右下方的十字图形示意性地表示发生中心点，而左上方的十字图形示意性地表示元素中心点。在“引力”动画效果被设置为“排斥力”的情况下，在“排斥力”的作用下，界面元素的“引力”的方向为移动的界面元素的中心点指向每个受到影响的界面元素的中心点的矢量方向。本申请实施例中对于发生中心点和元素中心点的选取不作限定，例如发生中心点和元素中心点可以是界面元素的几何中心，也可以是界面元素中的任意一点。类似于上文的描述，由于本申请实施例中的“引力”并不限定在同一个界面，则在一些实施例中，“引力”的发生中心点可以是一个界面元素在界面切换前的几何中心，元素中心点可以是该界面元素在切换后的几何中心，具体说明请参见后文。

图4示出了本申请实施例提供的受到“引力”影响的界面元素的移动示意图。

如图4中的(a)所示，在同一界面上显示有界面元素401和界面元素402。电子设备可以使得界面元素401向右移动，界面元素401在向右移动时，由于界面元素402受到“引力”的影响也可以向右移动。

如图4中的(b)所示，电子设备可以使得界面元素401向左移动，界面元素401在向左移动时，由于界面元素402受到“引力”的影响也可以向左移动。

需要说明的是，上述示例中，界面元素401向靠近界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“排斥力”，界面元素401向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402的作用为“吸引力”，但本申请实施例并不限定于此，例如，界面元素401向靠近界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“吸引力”，界面元素401向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402的作用为“排斥力”。

再例如，界面元素401向靠近界面元素402的方向移动或向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“排斥力”。换句话说，当界面元素401移动时，其“引力”对界面元素402作用为“排斥力”，与界面元素401的移动方向无关。

再例如，界面元素401向靠近界面元素402的方向移动或向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“吸引力”。换句话说，当界面元素401移动时，其“引力”对界面元素402作用为“吸引力”，与界面元素401的移动方向无关。

本申请实施例中提供的界面切换的显示方法，在界面切换过程中，电子设备可以根据界面元素之间的“引力”确定在界面切换过程中的动画效果，使得界面切换更加自然，下面将介绍界面元素的分类以及界面切换过程中的动画效果。

本申请实施例提供的界面切换的显示方法可以将界面中的不同界面元素分成不同的类型，可以理解的是，不同界面中可以包括相同类型的界面元素，从而电子设备在进行界面切换时，可以根据2个界面中相同类型的界面元素的相对移动位置以及界面元素之间的“引力”确定界面切换时的动画效果，若在界面切换后新增一个或多个类型的界面元素，则该一个或多个类型的界面元素可以不受到“引力”的影响，或者也可以受到“引力”的影响，具体说明请参见后文。

本申请实施例中可以通过以下几种方式划分不同界面的界面元素的类型。

一种可能的实现方式，将界面元素划分为主界面元素和次界面元素以确定不同界面中相同类型的界面元素。换句话说，将界面元素划分为主界面元素和次界面元素两个类型。

例如，图5示出了本申请实施例提供的将界面元素划分为主界面元素和次界面元素的示意图，如图5中的(a)所示，电子设备显示有界面501，电子设备可以在界面501显示界面元素502、界面元素503、界面元素504、界面元素505、界面元素506，其中电子设备可以将界面元素505设置为主界面元素，将界面元素502、界面元素503、界面元素504和界面元素506设置为次界面元素。

类似的，如图5中的(b)所示，电子设备显示有界面507，该界面507和界面501不是同一个界面，电子设备可以在界面507显示界面元素508、界面元素509、界面元素510、界面元素511和界面元素512，其中电子设备可以将界面元素508设置为主界面元素，将界面元素509、界面元素510、界面元素511和界面元素512设置为次界面元素。

电子设备可以根据第一预设规则确定主界面元素和次界面元素，本申请实施例中第一预设规则不作限定，用户或开发者可以自定义第一预设规则。

示例性的，电子设备可以将一个界面中的尺寸最大的界面元素确定为主界面元素。界面元素的尺寸可以使用界面元素的面积或周长表征。

示例性的，电子设备可以将一个界面中的位于黄金分割点的界面元素确定为主界面元素。

示例性的，电子设备可以将位于预设区域的界面元素确定为主界面元素。界面的预设区域可以是用户或开发者自定义的。若该预设区域内包括多个界面元素时，电子设备可以随机确定一个界面元素为主界面元素。

一种可能的实现方式，根据界面元素在界面中的位置划分界面元素的类型以确定不同界面中相同类型的界面元素。

具体的，电子设备可以将位于不同界面的相同位置或相同区域的界面元素确定为同一类型的界面元素。

例如，图6示出了本申请实施例提供的根据界面元素在界面中的位置划分界面元素的类型的示意图，如图6中的(a)所示，电子设备显示有界面601，电子设备可以将界面601分为上部、中部和下部3个区域，其中电子设备在界面601的上部区域显示界面元素602、界面元素603和界面元素604，在界面601的中部区域显示界面元素605，在界面601的下部区域显示界面元素606。如图6中的(b)所示，电子设备显示有界面607，类似的，电子设备可以将界面607分为上部、中部和下部3个区域，其中电子设备在界面607的上部区域显示界面元素608和界面元素609，在界面607的中部区域显示界面元素610和界面元素611，在界面607的下部区域显示界面元素612。由于界面元素602、界面元素603、界面元素604位于界面601的上部区域，界面元素608、界面元素609位于界面607的上部区域，则电子设备可以将界面元素602、界面元素603、界面元素604、界面元素608和界面元素609确定为同一个类型的界面元素。类似的，电子设备可以将界面元素605、界面元素610和界面元素611确定为同一个类型的界面元素，将界面元素606和界面元素612确定为同一个类型的界面元素。

需要说明的是，上文中将界面分为了上部、中部、下部区域，但本申请实施例对此不作限定，例如，还可以将界面分为左部、中部、右部区域。

再例如，如图6中的(c)所示，电子设备显示有界面613，电子设备可以在界面613显示有界面元素614、界面元素615、界面元素616、界面元素617、界面元素618、界面元素619、界面元素620、界面元素621、界面元素622、界面元素623、界面元素624、界面元素625。如图6中的(d)所示，电子设备显示有界面626，界面613和界面626可以是桌面的不同界面，电子设备可以在界面626显示有界面元素627、界面元素628、界面元素629、界面元素630、界面元素631、界面元素632、界面元素633、界面元素634、界面元素635、界面元素636、界面元素637、界面元素638。由于界面元素614在界面613的位置与界面元素627在界面626的位置相同，则电子设备可以确定界面元素614和界面元素627为同一个类型的界面元素。类似的，电子设备可以确定界面元素615和界面元素628为同一个类型的界面元素，确定界面元素616和界面元素629为同一个类型的界面元素，确定界面元素617和界面元素630为同一个类型的界面元素，确定界面元素618和界面元素631为同一个类型的界面元素，确定界面元素619和界面元素632为同一个类型的界面元素，确定界面元素620和界面元素633为同一个类型的界面元素，确定界面元素621和界面元素634为同一个类型的界面元素，确定界面元素622和界面元素635为同一个类型的界面元素，确定界面元素623和界面元素636为同一个类型的界面元素，确定界面元素624和界面元素637为同一个类型的界面元素，确定界面元素625和界面元素638为同一个类型的界面元素。

一种可能的实现方式，确定每一个界面元素的标签，然后根据界面元素的标签划分界面元素的类型以确定不同界面中相同类型的界面元素。

具体的，电子设备可以确定每一个界面元素的标签，则电子设备可以将不同界面中的具有相同标签的界面元素确定为同一个类型的界面元素。

例如，图7示出了本申请实施例提供的根据界面元素的标签划分界面元素的类型的示意图，如图7中的(a)所示，电子设备显示有界面701，电子设备可以在界面701显示界面元素702、界面元素703、界面元素704、界面元素705、界面元素706，其中电子设备可以确定界面元素702和界面元素706的标签为标签#1，界面元素703和界面元素704的标签为标签#2，界面元素705的标签为标签#3。类似的，如图7中的(b)所示，电子设备显示有界面707，电子设备可以在界面707显示界面元素708、界面元素709、界面元素710、界面元素711、界面元素712，其中电子设备可以确定界面元素709、界面元素711和界面元素712的标签为标签#1，界面元素710的标签为标签#2，界面元素708的标签为标签#3。由于界面元素702、界面元素706、界面元素709、界面元素711、界面元素712的标签相同，则电子设备可以确定界面元素702、界面元素706、界面元素709、界面元素711、界面元素712是同一个类型的界面元素，类似的，还可以确定界面元素703、界面元素704、界面元素710是同一个类型的界面元素，界面元素705和界面元素708是同一个类型的界面元素。

本申请实施例对于确定界面元素的标签的方法不作限定。例如，界面是应用程序的界面，开发者在进行开发时，可以定义每一个界面元素的标签。

再例如，用户可以自定义界面元素的标签。

再例如，电子设备预置有用于确定界面元素的标签的第二预设规则。

一种可能的实现方式，电子设备可以根据计算不同界面的界面元素的相似度，将相似度超过第一阈值的界面元素确定为同一个类型的界面元素。

示例性的，电子设备可以计算不同界面的界面元素的颜色相似度，将颜色相似度超过第一阈值的界面元素确定为同一个类型的界面元素。

例如，电子设备在第一界面显示有界面元素#1、界面元素#2、界面元素#3，在第二界面显示有界面元素#4、界面元素#5、界面元素#6，电子设备可以计算界面元素#1与界面元素#4的颜色相似度为40％，界面元素#1与界面元素#5的颜色相似度为60％，界面元素#1与界面元素#6的颜色相似度为60％，则电子设备可以将界面元素#1、界面元素#5、界面元素#6确定为同一个类型的界面元素。

示例性的，电子设备可以计算不同界面的界面元素的尺寸相似度，将尺寸相似度超过第一阈值的界面元素确定为同一个类型的界面元素。

示例性的，电子设备可以计算不同界面的界面元素的形状相似度，将形状相似度超过第一阈值的界面元素确定为同一个类型的界面元素。

应理解，针对电子设备通过尺寸相似度或形状相似度确定不同界面的同一个类型的界面元素的描述可以参见针对电子设备通过颜色相似度确定不同界面的同一个类型的界面元素的描述，为了简洁，在此不再赘述。

需要说明的是，本申请实施例中对于计算相似度的算法不作限定，例如，计算相似度的算法可以是欧几里得距离(eucledian distance)算法、曼哈顿距离(manhattandistance)算法、明可夫斯基距离(minkowski distance)算法、余弦相似度(cosinesimilarity)算法、杰卡德相似系数(jaccard similarity coefficient)算法、皮尔森相关系数(pearson correlation coefficient)算法等。

一种可能的实现方式，电子设备可以确定不同界面的界面元素的层级，将相同层级的界面元素确定为同一个类型的界面元素。

电子设备在显示界面元素时，可以确定界面中的每一个界面元素的层级，从而电子设备可以将不同界面中的相同层级的界面元素确定为同一个类型的界面元素。

上面介绍了将不同界面的界面元素划分为同一个类型的界面元素，下面将介绍本申请实施例提供的界面切换时的动画效果。

图8示出了本申请实施例提供的界面切换时的动画效果的示意图。

如图8中的(a)所示，电子设备显示有界面801，电子设备在界面801上显示有界面元素802、界面元素803、界面元素804、界面元素805、其中界面801是切换前的界面。

如图8中的(b)所示，电子设备显示还有界面806，电子设备在界面806上显示有界面元素807、界面元素808、界面元素809、界面元素810，其中界面806是切换后的界面。

如图8中的(a)和(b)所示，界面元素802和界面元素809是同一个类型的界面元素，即类型#1，界面元素803和界面元素810是同一个类型的界面元素，即类型#2，界面元素804和界面元素808是同一个类型的界面元素，即类型#3，界面元素805和界面元素807是同一个类型的界面元素，即类型#4。

电子设备将界面由界面801切换至界面806的过程可以理解为电子设备将同一个类型的界面元素由其在界面801的位置移动至其在界面806的位置。例如，如图8中的(c)所示，图中虚线的界面元素代表不同类型的界面元素在界面801的位置，图中实线的界面元素代表不同类型的界面元素在界面806的位置，则电子设备将界面由界面801切换至界面806的过程是将图8中的(c)中的使用虚线表示的不同类型的界面元素移动至使用实线表示的不同类型的界面元素的位置。

电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图8所示的示例中，以类型#3的界面元素的在界面806的位置的中心点为“引力”发生中心点为例，即“引力”中心点可以是界面元素808的几何中心点。

如图8中的(d)-(e)所示，将界面元素808的几何中心点作为“引力”发生中心点，类型#3的界面元素由于受到“引力”影响，可以由虚线位置移动至实线位置，运动轨迹是直线。针对类型#1的界面元素，类型#1的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#1的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，如图8中的(e)所示，类型#1的界面元素的移动轨迹可以由直线变为曲线。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#2的界面元素的移动轨迹可以是直线，由于受到“引力”的影响，如图8中的(e)所示，类型#2的界面元素的移动轨迹可以是曲线。针对类型#4的界面元素，类型#4的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#4的界面元素的移动轨迹可以是直线，由于受到“引力”的影响，如图8中的(e)所示，类型#4的界面元素的移动轨迹可以是曲线。

综上所述，类型#1、类型#2、类型#4的界面元素在移动过程中，其移动轨迹可以受到“引力”的影响而发生弯曲。

在上述示例中，界面801和界面806都包含类型#1、类型#2、类型#3、类型#4的界面元素，但本申请实施例并不限定于此，例如如图8中的(a)和(h)所示，若界面806中还包括类型#5的界面元素811，如图8中的(h)所示，图中虚线所示的类型#5的界面元素代表其在用户触发界面切换时在界面806的位置，图中实线所示的类型#5的界面元素代表其在最终完成界面切换时在界面806的位置，由于类型#5的界面元素是新增的界面元素，其可以不受“引力”的影响，因此类型#5的界面元素的移动轨迹可以是直线。在另一些实施例中，类型#5的界面元素也可以受到“引力”的影响，则其移动轨迹可以是曲线。

在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动轨迹的曲率设置为相同的曲率。以此方式，电子设备用于实现界面切换时的动画效果的处理可以被简化。

在另一些实施例中，电子设备可以基于多种影响因素确定将受到“引力”作用影响的界面元素的移动轨迹。例如，不同界面元素的移动轨迹的弯曲方向以及曲率可以不相同。针对影响因素对于受到“引力”作用影响的界面元素的移动轨迹的影响的描述可以参见后文说明，在此不展开叙述。

可以理解的是，类型#1、类型#2、类型#4的界面元素在移动过程中，移动轨迹的弯曲方向与受到“引力”相关，若受到的“引力”作用为“吸引力”，则移动轨迹的弯曲方向可以是朝向“引力”的发生中心点，若受到的“引力”作用为“排斥力”，则移动轨迹的弯曲方向可以是远离“引力”的发生中心点。

例如，如图8中的(e)所示，“引力”的发生中心点为界面元素808的几何中心点，且类型#1、类型#2、类型#4的界面元素受到的“引力”作用为“吸引力”，则类型#1、类型#2、类型#4的界面元素移动轨迹的弯曲方向朝向界面元素808的几何中心点。

再例如，如图8中的(f)所示，“引力”的发生中心点为界面元素808的几何中心点，且类型#1、类型#2、类型#4的受到的“引力”作用为“排斥力”，则类型#1、类型#2、类型#4的界面元素移动轨迹的弯曲方向远离界面元素808的几何中心点。

可以理解的是，若类型#1、类型#2、类型#4的界面元素在移动过程中，既受到“吸引力”，也受到“排斥力”，则类型#1、类型#2、类型#4的界面元素的移动轨迹可以发生多次弯曲。例如，如图8中的(g)所示，类型#1的界面元素在移动过程中先受到“吸引力”，再受到“排斥力”，则其移动轨迹的弯曲方向可以向朝向界面元素808的几何中心点，然后再远离界面元素808的几何中心点。

本申请实施例中，类型#1、类型#2、类型#4的界面元素不仅移动轨迹可以受到“引力”影响，类型#1、类型#2、类型#4的界面元素的移动速度也可以受到“引力”的影响。

在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动速度设置为相同的速度。在此方式，电子设备用于实现界面切换时的动画效果的处理可以被简化。

在一些实施例中，电子设备可以根据界面元素之间的“引力”确定界面元素的移动速度。

例如，以类型#1的界面元素为例，由图8中的(e)示出的类型#1的界面元素的移动轨迹可知，类型#1的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。

在一些实施例中，发生中心点的“引力”对类型#1的界面元素先作用为“吸引力”然后再作用为“排斥力”。类型#1的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#1的界面元素的移动轨迹发生弯曲，随着类型#1的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#1的界面元素的移动速度可以增加，加速度也可以增加。当类型#1的界面元素移动到预设的位置时，电子设备可以使得发生中心点的“引力”对类型#1的界面元素可以作用为“排斥力”，则类型#1的界面元素可以向远离发生中心点的方向移动，此时类型#1的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#1的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#1的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。

针对上述界面元素的移动过程，图8中的(i)示出了类型#1的界面元素的速度时间曲线，如图8中的(i)所示，类型#1的界面元素在移动过程中速度和加速度可以不断增加，但由于随着类型#1的界面元素逐渐远离“引力”发生中心点，加速度可以减小，速度可以继续增加。

在另一些实施例中，发生中心点的“引力”对类型#1的界面元素作用为“吸引力”。类型#1的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#1的界面元素的移动轨迹发生弯曲，随着类型#1的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#1的界面元素的移动速度可以增加，加速度增加。随着类型#1的界面元素向图8中的(e)所示的实线位置移动，由于类型#1的界面元素受到“吸引力”会阻碍其移动，类型#1的界面元素的移动速度可以逐渐减小直至移动到图8中的(e)所示的实线位置。在类型#1的界面元素的移动速度减小的过程中，由于类型#1的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#1的界面元素可以做变减速移动。

针对上述界面元素的移动过程，图8中的(j)示出了类型#1的界面元素的速度时间曲线，如图8中的(j)所示，类型#1的界面元素在移动过程中速度和加速度可以不断增加，但当“吸引力”阻碍类型#1的界面元素的移动时，类型#1的界面元素的移动速度、加速度可以减小，且随着类型#1的界面元素逐渐远离“引力”发生中心点，类型#1的界面元素的移动速度的减小速度可以变缓。

再例如，以类型#2的界面元素为例，由图8中的(e)示出的类型#1的界面元素的移动轨迹可知，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。

在一些实施例中，发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”然后再作用为“排斥力”。类型#2的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲，随着类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#2的界面元素的移动速度可以增加，加速度也可以增加。当类型#2的界面元素移动到预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。

在另一些实施例中，发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。类型#2的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲，随着类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#2的界面元素的移动速度可以增加。随着类型#2的界面元素向图8中的(e)所示的实线位置移动，由于类型#2的界面元素受到“吸引力”会阻碍其移动，类型#2的界面元素的移动速度可以逐渐减小直至移动到图8中的(e)所示的实线位置。在类型#2的界面元素的移动速度减小的过程中，由于类型#2的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#2的界面元素可以做变减速移动。

可以理解的是，类型#2的界面元素的速度时间曲线类似于类型#1的界面元素的速度时间曲线，为了简洁，在此不再赘述。

再例如，以类型#4的界面元素为例，由图8中的(e)可知，类型#4的界面元素在移动过程中，由于受到发生中心点的“引力”作用，且“引力”可以作用为“吸引力”，则类型#4的界面元素可以按照图中所示的移动轨迹向着发生中心点的方向移动，随着类型#4的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#4的界面元素的移动速度可以增加。随着类型#4的界面元素向图8中的(d)所示的实线位置移动，其受到的“吸引力”会阻碍其移动，则类型#4的界面元素的移动速度可以减慢直至移动至图8中的(e)所示的实线位置。在类型#4的界面元素的移动速度减小的过程中，由于类型#4的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#4的界面元素可以做变减速移动。

可以理解的是，类型#4的界面元素的速度时间曲线类似于图8中的(j)所示的曲线，为了简洁，在此不再赘述。

针对上述界面元素的移动过程，图8中的(k)示出了类型#3的界面元素的速度时间曲线，如图8中的(k)所示，类型#3的界面元素在移动过程可以理解为受到“引力”发生中心点的吸引而移动，随着类型#3的界面元素逐渐靠近“引力”发生中心点，类型#3的界面元素受到的“引力”增加，则类型#3的界面元素在移动过程中速度和加速度可以不断增加。针对上述界面元素的移动过程，图8中的(i)-(k)示出的是界面元素的速度时间曲线，图8中的(l)示出了一种类型#1的界面元素位移时间曲线，其中第一曲线是类型#1的界面元素的未受“引力”的位移时间曲线，第二曲线是类型#1的界面元素受到“引力”的位移时间曲线，由图8中的(l)所示，受到“引力”影响的类型#1的界面元素在移动的初期，在同一时刻的位移可以大于未受到“引力”影响的类型#1的界面元素的位移，随着类型#1的界面元素受到的“引力”阻碍其移动，则在同一时刻未受到“引力”影响的类型#1的界面元素的位移大于受到“引力”影响的类型#1的界面元素的位移。

需要说明的是，在上述示例中，“引力”的发生中心点是固定位置，即界面元素808的几何中心点，但本申请实施例的“引力”的发生中心点的位置是可以移动的。例如可以设定移动中的类型#3的界面元素为“引力”的发生中心点。在上述示例中，以“引力”的发生中心点的数量是1个为例，但本申请实施例对此不作限定，“引力”的发生中心点的数量也可以是多个。

还需要说明的是，在上述示例中，电子设备可以根据不同界面中的相同类型的界面元素确定联动切换动画效果，下面将介绍若将界面元素分为主界面元素和次界面元素时，界面切换的动画效果。

图9示出了本申请实施例提供的界面切换时的动画效果的示意图。

如图9中的(a)所示，电子设备显示有界面901，电子设备可以在界面901显示界面元素902、界面元素903、界面元素904、界面元素905、界面元素906，其中电子设备可以将界面元素905设置为主界面元素，将界面元素902、界面元素903、界面元素904和界面元素906设置为次界面元素。

如图9中的(b)所示，电子设备显示有界面907，该界面907和界面901不是同一个界面，电子设备可以在界面907显示界面元素908、界面元素909、界面元素910、界面元素911和界面元素912，其中电子设备可以将界面元素908设置为主界面元素，将界面元素909、界面元素910、界面元素911和界面元素912设置为次界面元素。

当电子设备从界面901切换至界面908的过程中，电子设备显示界面907，并可以以主界面元素在界面907中的位置的中心点为“引力”发生中心点，将主界面元素从界面901的位置移动至界面907的位置，其他次界面元素由于受到“引力”的影响而移动。

如图9中的(b)所示，电子设备在将界面901切换界面907的过程中，界面元素905逐渐变为界面元素908，且逐渐由界面元素905在界面901中的位置移动至界面908在界面907中的位置。主界面元素的移动轨迹可以是直线也可以是曲线，本申请实施例对此不作限定。

界面中的次界面元素由于受到“引力”的影响开始移动，以界面元素910为例，界面元素为次界面元素，电子设备在将界面切换到界面907时，界面元素910由于受到“引力”的影响，可以从图中的虚线指示的位置移动至最终的位置，起始位置可以是界面907中的任意位置，该位置可以由开发者定义。由于界面元素910受到“引力”的影响，其移动轨迹可以是弯曲的，弯曲的方向可以朝向界面元素908或远离界面元素908，具体描述可以参见针对图8的描述，为了简洁，在此不再赘述。

应理解，针对界面元素909，界面元素911，界面元素912移动的描述，可以参见针对界面元素910的描述。

上文描述了电子设备在进行界面切换时由于“引力”的存在使得界面元素的移动存在关联，下面将介绍影响界面切换的显示动画效果的因素。

(1)距离。

首先介绍本申请实施例确定距离的几种可能的方式。

一种可能的实现方式，确定界面元素的基准点，根据界面元素基准点之间的距离确定界面元素的距离。

例如，如图10中的(a)所示，界面显示有界面元素1001和界面元素1002，电子设备可以选取界面元素1001的几何中心点和界面元素1002的几何中心点为基准点，则界面元素1001和界面元素1002的之间的距离可以是界面元素1001的几何中心点与界面元素1002的几何中心点之间的距离。

需要说明的是，图10中的(a)所示的示例中，电子设备在确定两个界面元素之间的距离时，以该两个界面元素的几何中心点为计算的基准点，但本申请实施例并不限定于此，本申请实施例中在计算两个界面元素之间的距离时，可以选取该两个界面元素中的任意一点作为基准点。例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最短的两个点作为基准点。以图中所示的界面元素1001和界面元素1002为例，可以选取界面元素1001下边界和右边界的交点以及界面元素1002的左边界和上边界的交点作为基准点。

再例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最长的两个点作为基准点。以图中所示的界面元素1001和界面元素1002为例，可以选取界面元素1001的左边界和上边界的交点以及界面元素1002的下边界和右边界的交点作为基准点。

一种可能的实现方式，确定界面元素之间的横向距离，将界面元素之间的横向距离确定为界面元素之间的距离。

例如，如图10中的(b)所示，界面显示有界面元素1001和界面元素1002，界面元素1001和界面元素1002的横向距离为d2，则电子设备可以将d2确定为界面元素之间的距离。

一种可能的实现方式，确定界面元素之间的纵向距离，将界面元素之间的纵向距离确定为界面元素之间的距离。

例如，如图10中的(c)所示，界面显示有界面元素1001和界面元素1002，界面元素1001和界面元素1002的纵向距离为d3，则电子设备可以将d3确定为界面元素之间的距离。

一种可能的实现方式，确定界面元素之间的横向距离和纵向距离，然后根据横向距离和纵向距离确定界面元素之间的距离。

如图10中的(d)所示，界面元素1001和界面元素1002的横向距离为d4，界面元素1001和界面元素1002的纵向距离为d5。作为一种示例，如图10的(e)所示，基于横向距离d4和纵向距离d5的大小，电子设备可以确定出以横向距离d4和纵向距离d5为两条直角边的直角三角形，该直角三角形具有斜边。然后，基于界面元素1001和界面元素1002几何中心点的连线，电子设备可以在直角三角形内确定一条线段，则电子设备可以根据三角函数原理确定该线段的长度为d6，即界面元素1001和界面元素1002之间的距离d6。

下面将介绍距离对于界面切换的动画效果的影响。

本申请实施例中引入了万有引力模型，万有引力模型可以通过公式1表达：

由公式(1)可得，两个界面元素之间的“引力”与两个界面元素的“质量”和距离有关。由于本申请实施例针对的是界面元素，因此可以使用公式(2)或公式(3)以界面元素的尺寸替代界面元素的“质量”。

M＝K×R (2)

M＝K×r (3)

其中，k为常量参数，M为界面元素的“质量”，R为界面元素的尺寸，r为两个界面元素之间的距离。

结合公式(1)-公式(3)，可以将公式(1)可以简化为公式(4)，

由公式(4)可得，界面元素之间的“引力”与界面元素的尺寸成正比，与界面元素之间的距离成反比。图11示出了本申请实施例提供的不同距离界面元素界面切换时的动画效果的示意图。

如图11所示，界面1101和界面1104上有类型#1的界面元素和类型#2的界面元素，其中虚线表示的是类型#1的界面元素和类型#2的界面元素在界面1101的位置，实线表示的是类型#1的界面元素和类型#2的界面元素在界面1104的位置。

电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图11所示的示例中，以类型#1的界面元素的在界面1101的位置的中心点为“引力”发生中心点为例。

如图11中的(a)和(b)所示，将类型#1的界面元素在界面1101的几何中心点作为“引力”发生中心点，假设在界面1101中，类型#2的界面元素与发生中心之间的距离为d1，且类型#1的界面元素和类型#2的界面元素的尺寸相同，两个界面元素之间的“引力”为f1。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，类型#2的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，其移动轨迹可以是曲线。

类型#2的界面元素的移动轨迹的曲率与类型#2的界面元素受到的“引力”有关。若类型#2的界面元素受到的“引力”增大，其移动轨迹的曲率增大，若类型#2的界面元素受到的“引力”减小，其移动轨迹的曲率减小。

如图11中的(b)所示，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点。

如图11中的(c)和(d)所示，在界面1101中，类型#2的界面元素与发生中心点之间距离变为d2，d2＞d1，由公式(2)可得，两个界面元素之间的“引力”变为f2，且f2＜f1，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点，但移动轨迹的曲率小于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。

如图11中的(b)和(d)所示，图11中的(d)示出的类型#2的界面元素的移动轨迹的曲率小于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。

需要说明的是，上述示例中以类型#2的界面元素受到的“引力”作用为“吸引力”为例，但本申请实施例并不限定于此。例如，类型#2的界面元素受到的“引力”作用为“排斥力”，或类型#2的界面元素受到的“引力”先作用为“排斥力”再作用为“吸引力”，或类型#2的界面元素受到的“引力”先作用为“吸引力”再作用为“排斥力”，其移动轨迹的曲率都会因为受到“引力”大小的改变而改变。

上面描述了类型#2的界面元素的移动轨迹的曲率由于距离的变化，下面将介绍距离对于移动速度的影响。

如图11中的(b)和(d)所示，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。

在一些实施例中，若发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。图11中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图11中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图11中的(b)的类型#2的界面元素受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素移动速度。

随着图11中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图11中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。

随着类型#2的界面元素向图11中的(d)和(b)所示的实线位置移动，类型#2的界面元素与发生中心点之间的距离增大，则类型#2的界面元素受到“吸引力”会阻碍其移动，使得类型#2的界面元素的加速度呈负值，移动速度减小直至移动至实线位置。但图11中的(b)的类型#2的界面元素由于受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的加速度小于图11中的(d)的类型#2的界面元素的加速度，换句话说，图11中的(b)的类型#2的界面元素的移动速度的减小幅度大于图11中的(d)的类型#2的界面元素的移动速度的减小幅度。

在类型#2的界面元素与发生中心点之间的距离减小的移动过程中，图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素的移动速度，而图11中的(b)的类型#2的界面元素的移动速度的减小幅度大于图11中的(d)的类型#2的界面元素的移动速度的减小幅度，则在一些场景下，图11中的(b)的类型#2的界面元素和图11中的(d)的类型#2的界面元素可以同时达到实线位置，或在另一些场景下，图11中的(b)的类型#2的界面元素可以早于图11中的(d)的类型#2的界面元素达到实线位置，或在另一些场景下，图11中的(b)的类型#2的界面元素可以晚于图11中的(d)的类型#2的界面元素达到实线位置。

在另一些实施例中，若发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”再作用为“排斥力”。图11中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图11中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图11中的(b)的类型#2的界面元素受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素移动速度。

类似于上文中的描述，随着类型#2的界面元素移动至预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。由于图11中的(b)的类型#2的界面元素由于受到的“排斥力”大于图11中的(d)的类型#2的界面元素受到的“排斥力”，图11中的(b)的类型#2的界面元素的加速度大于图11中的(d)的类型#2的界面元素的加速度，则图11中的(b)的类型#2的界面元素达到实线位置的时间可以早于图11中的(d)的类型#2的界面元素达到实线位置的时间。

上文示例中的界面元素在移动过程中受到的“引力”可以作用为“吸引力”或“排斥力”，在一些实施例中，电子设备可以根据界面元素在移动过程中与发生中心点之间的距离确定受到的“引力”的效果。例如，在切换前的界面中，界面元素与发生中心点之间的距离为d，若界面元素在移动过程中，界面元素与发生中心点之间的距离小于d，则界面元素受到的“引力”作用为“排斥力”；若界面元素在移动过程中，界面元素与发生中心点之间的距离大于d，则界面元素受到的“引力”作用为“吸引力”。

(2)界面元素的尺寸。

由公式(2)可得，两个界面元素之间的“引力”，可以与界面元素的尺寸成正比，与界面元素之间的距离成反比。

本申请实施例中可以使用界面元素的面积、界面元素的周长等表征界面元素的尺寸。

图12示出了本申请实施例提供的不同尺寸的界面元素界面切换时的动画效果的示意图。

如图12所示，界面1201和界面1204上有类型#1的界面元素和类型#2的界面元素，其中虚线表示的是类型#1的界面元素和类型#2的界面元素在界面1201的位置，实线表示的是类型#1的界面元素和类型#2的界面元素在界面1204的位置。

电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图12所示的示例中，以类型#1的界面元素的在界面1201的位置的中心点为“引力”发生中心点为例。

如图12中的(a)和(b)所示，将类型#1的界面元素在界面1201的几何中心点作为“引力”发生中心点，假设在界面1201中，类型#2的界面元素与发生中心之间的距离为d1，类型#1的界面元素和类型#2的界面元素的尺寸相同，均为R1，在两个界面元素之间的距离是d1，尺寸是R1时，两个界面元素之间的“引力”为f1。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，类型#2的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，其移动轨迹可以是曲线。

如图12中的(c)和(d)所示，若类型#1的界面元素的尺寸由R1增大为R2，类型#2的界面元素的尺寸以及两个界面元素之间的尺寸不变，由公式(2)可得，两个界面元素之间的“引力”可以增大为f2，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点，但移动轨迹的曲率大于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。

还需要说明的是，上述示例中计算类型#1的界面元素和类型#2的界面元素之间的“引力”采用的是类型#1的界面元素和类型#2的界面元素在界面1201中的尺寸，但是本申请实施例对此不作限定，例如，可以采用类型#1的界面元素和类型#2的界面元素在界面1204中的尺寸，或可以采用类型#1的界面元素在界面1201中的尺寸以及类型#2的界面元素在界面1204中的尺寸，或可以采用类型#1的界面元素在界面1204中的尺寸以及类型#2的界面元素在界面1201中的尺寸。

上面描述了类型#2的界面元素的移动轨迹的曲率由于界面元素尺寸的变化而变化，下面将介绍界面元素的尺寸对于移动速度的影响。

如图12中的(b)和(d)所示，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。

在一些实施例中，若发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。图12中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图12中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图12中的(b)的类型#2的界面元素受到的“吸引力”小于图12中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素移动速度。

随着图12中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图12中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。

随着类型#2的界面元素向图12中的(d)和(b)所示的实线位置移动，类型#2的界面元素与发生中心点之间的距离增大，则类型#2的界面元素受到“吸引力”会阻碍其移动，使得类型#2的界面元素的加速度呈负值，移动速度减小直至移动至实线位置。但图12中的(b)的类型#2的界面元素由于受到的“吸引力”小于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的加速度大于图12中的(d)的类型#2的界面元素的加速度，换句话说，图12中的(b)的类型#2的界面元素的移动速度的减小幅度小于图12中的(d)的类型#2的界面元素的移动速度的减小幅度。

在类型#2的界面元素与发生中心点之间的距离减小的移动过程中，图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素的移动速度，而图12中的(b)的类型#2的界面元素的移动速度的减小幅度小于图12中的(d)的类型#2的界面元素的移动速度的减小幅度，则在一些场景下，图12中的(b)的类型#2的界面元素和图12中的(d)的类型#2的界面元素可以同时达到实线位置，或在另一些场景下，图12中的(b)的类型#2的界面元素可以早于图12中的(d)的类型#2的界面元素达到实线位置，或在另一些场景下，图12中的(b)的类型#2的界面元素可以晚于图12中的(d)的类型#2的界面元素达到实线位置。

在另一些实施例中，若发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”再作用为“排斥力”。图12中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图12中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图12中的(b)的类型#2的界面元素受到的“吸引力”小于图12中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素移动速度。

类似于上文中的描述，随着类型#2的界面元素移动至预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。由于图12中的(b)的类型#2的界面元素由于受到的“排斥力”小于图12中的(d)的类型#2的界面元素受到的“排斥力”，图12中的(b)的类型#2的界面元素的加速度小于图12中的(d)的类型#2的界面元素的加速度，则图12中的(b)的类型#2的界面元素达到实线位置的时间可以晚于图12中的(d)的类型#2的界面元素达到实线位置的时间。

(3)界面元素移动的方向。

上文示例中的“引力”可以作用为“吸引力”或“排斥力”。界面元素受到的“引力”作用为“吸引力”还是“排斥力”可以与其移动的方向相关。

参考图8中的(c)和(d)，假设以运动中的类型#3的界面元素作为“引力”的发生中心点。针对类型#1的界面元素，类型#3的界面元素在由界面801切换至界面806的过程中向左移动，类型#1的界面元素在由界面801切换至界面806的过程中向右下移动。由类型#3的界面元素和类型#1的界面元素的移动轨迹可以看出，两者在移动过程中，距离可以先变小再变大。类型#3的界面元素和类型#1的界面元素之间的距离变小的过程可以理解为类型#1的界面元素受到的“引力”作用为“吸引力”，从而类型#1的界面元素与类型#3的界面元素之间的距离变小，且随着距离的减小，类型#1的界面元素的移动速度可以加快。当达到临界点时(例如，临界点可以是类型#1的界面元素位于类型#3的界面元素正上方对应的点)，类型#1的界面元素受到的“引力”可以作用为“排斥力”，则类型#1的界面元素和类型#3的界面元素之间的距离可以增大，且随着距离的增大，类型#1的界面元素的移动速度可以减缓直至移动到实线位置。可以理解的是，针对类型#2的界面元素的描述可以参见针对类型#1的界面元素的描述。

继续参考图8中的(c)和(d)，假设以运动中的类型#3的界面元素作为“引力”的发生中心点。针对类型#4的界面元素，类型#3的界面元素在由界面801切换至界面806的过程中向左移动，类型#4的界面元素在由界面801切换至界面806的过程中向左上移动。类型#3的界面元素和类型#4的界面元素的移动方向是相近的。类型#4的界面元素向左上移动可以理解为类型#4的界面元素受到的“引力”为吸引力。

(4)摩擦力

本申请实施例中，将自然界中的摩擦力引入到了界面元素中，使得动画效果更加贴近自然效果。

本申请实施例中的“摩擦力”可以是“滑动摩擦力”，“滑动摩擦力”可以理解为界面元素在移动过程中受到的“摩擦力”，“滑动摩擦力”会阻碍界面元素的移动，使得界面元素的移动速度发生变化。

首先介绍本申请实施例中几种确定“摩擦力”的方式。

一种可能的实现方式，电子设备可以随机确定界面元素的“摩擦力”。例如，将界面元素#1的“摩擦力”定义为f#1，界面元素#2的“摩擦力”定义为f#2。

一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“摩擦力”。界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“摩擦力”。

一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“摩擦力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“摩擦力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“摩擦力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“摩擦力”越大；示例性的，若界面元素的颜色的RGB分量的离散度越高，其界面元素的“动摩擦因数”越大，则其“摩擦力”越大。

应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“摩擦力”，然后根据每一个对应的“摩擦力”求和得到界面元素的“摩擦力”。

还应理解，上述根据界面元素的颜色确定界面元素的“摩擦力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。

一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“摩擦力”。例如，不同的尺寸可以对应有不同的“摩擦力”，越大的界面元素，其“摩擦力”也可以越大。

可以理解的是，界面元素受到的“摩擦力”的方向与移动方向相反，因此“摩擦力”可以影响界面元素的移动速度。

参考图12中的(b)的类型#2的界面元素的移动，若未定义类型#2的界面元素的“摩擦力”，其位移时间曲线可以是图13所示的曲线#1，若定义了类型#2的界面元素的“摩擦力”，由于受到“摩擦力”的影响，类型#2的界面元素的移动速度减慢，则其到达实现位置的时间增加，其位移时间曲线可以是图13所示的曲线#2。

(5)重力

本申请实施例中，将自然界中的重力引入到了界面元素中，使得动画效果更加贴近自然效果。

在针对(4)的介绍中，电子设备定义了界面元素的“摩擦力”。为了更加符合物理规律，本申请实施例中，除了定义界面元素的“摩擦力”，还可以定义界面元素的“重力”以及动摩擦因数，从而可以根据界面元素的“重力”以及动摩擦因数确定界面因素移动时的“摩擦力”。在确定界面元素的“摩擦力”后，电子设备可以根据界面元素的“摩擦力”以及其受到的“引力”确定界面元素的移动时的速度变化，具体描述可以参见上文，在此不再赘述。

本申请实施例中，在确定界面元素的“摩擦力”时，可以通过以下几种方式确定界面元素的“重力”。

一种可能的实现方式，电子设备可以随机确定界面元素的“重力”。例如，将界面元素#1的“重力”定义为G#1，界面元素#2的“重力”定义为G#2。

一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“重力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“重力”。

一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“重力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“重力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“重力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“重力”越大。

应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“重力”，然后根据每一个对应的“重力”求和得到界面元素的“重力”。

还应理解，上述根据界面元素的颜色确定界面元素的“重力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。

一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“重力”。例如，不同的尺寸可以对应有不同的“重力”，越大的界面元素，其“重力”也可以越大。

需要说明的是，若界面元素是文件夹，该文件夹包括多个界面元素时，该文件夹的“重力”可以是通过该多个界面元素的“重力”相加得到。

(5)划分界面元素的类型的方式。

本申请实施例中可以将界面元素划分为不同的类型，根据划分界面元素类型的方式的不同，界面切换的动画效果可以不同。

示例性的，若将界面元素划分为主界面元素和次界面元素，则主界面元素可以是“引力”发生中心点，次界面元素由于受到“引力”的影响而移动。界面切换的动画效果可以参见针对图9的描述。

示例性的，若将界面元素划分为2个或2个以上的类型且不区分主次界面元素时，电子设备可以确定一个或多个“引力”发生中心，界面切换的动画效果可以参见针对图8的描述。

上文介绍了影响因素对于联动切换动画效果的影响，本申请实施例中影响联动切换动画效果的因素可以互相结合以影响界面切换的动画效果。

示例性的，电子设备可以根据界面元素的尺寸和“摩擦力”确定界面切换的动画效果。

根据上文描述，界面元素的尺寸越大，其受到的“引力越大”，若定义了界面元素的“摩擦力”，则由于受到“摩擦力”的影响，界面元素的移动速度可以减慢。

例如，图14示出了本申请实施例提供的界面切换时的动画效果示意图。

如图14中的(a)和(b)所示，电子设备在界面1401和界面1402上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素，其中虚线表示的是上述界面元素在界面1401的位置，实线表示的是上述界面元素在界面1402的位置。以“引力”发生中心点为类型#1的界面元素在界面1402的位置的几何中心点为例，其中在界面1401中，类型#2的界面元素和发生中心点之间的距离与类型#3的界面元素和发生中心点之间的距离相同，在界面1402中，类型#2的界面元素和发生中心点之间的距离与类型#3的界面元素和发生中心点之间的距离相同。

若没有定义界面元素的“摩擦力”，由于类型#3的界面元素的尺寸大于类型#2的界面元素的尺寸，上述两个界面元素在由虚线位置移动到实线位置的过程中，类型#3的界面元素的移动速度快于类型#2的界面元素的移动速度，且类型#3的界面元素的移动轨迹的曲率大于类型#2的界面元素的移动轨迹的曲率，即类型#3的界面元素的移动距离大于类型#2的界面元素的移动距离。

若定义了界面元素的“摩擦力”，不同界面元素受到的“摩擦力”可以不同，则在一些实施例中，类型#3的界面元素的移动轨迹的曲率可以与类型#2的界面元素的移动轨迹的曲率相同，即类型#3的界面元素的移动距离等于类型#2的界面元素的移动距离。在一些实施例中，类型#3的界面元素的移动速度慢于类型#2的界面元素的移动速度。

示例性的，电子设备可以根据距离和“摩擦力”确定界面切换的动画效果。

根据上文描述，距离越小，其受到的“引力越大”，若定义了界面元素的“摩擦力”，则由于受到“摩擦力”的影响，界面元素的移动速度可以减慢。

例如，图15示出了本申请实施例提供的界面切换时的动画效果示意图。

如图15中的(a)和(b)所示，电子设备在界面1501和界面1502上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素，其中虚线表示的是上述界面元素在界面1501的位置，实线表示的是上述界面元素在界面1502的位置。以“引力”发生中心点为类型#1的界面元素在界面1402的位置的几何中心点为例，其中在界面1501中，类型#3的界面元素和发生中心点之间的距离小于类型#2的界面元素和发生中心点之间的距离，在界面1402中，类型#3的界面元素和发生中心点之间的距离小于类型#2的界面元素和发生中心点之间的距离相同，类型#1的界面元素、类型#2的界面元素、类型#3的界面元素的尺寸相同。

若没有定义界面元素的“摩擦力”，由于类型#3的界面元素与发生中心点之间的距离小于类型#2的界面元素与发生中心点之间的距离，且类型#3的界面元素与类型#2的界面元素的尺寸相同，则类型#3的界面元素受到的“引力”大于类型#2的界面元素受到的“引力”，上述两个界面元素在由虚线位置移动到实线位置的过程中，类型#3的界面元素的移动速度快于类型#2的界面元素的移动速度，且类型#3的界面元素的移动轨迹的曲率大于类型#2的界面元素的移动轨迹的曲率，即类型#3的界面元素的移动距离大于类型#2的界面元素的移动距离。

示例性的，电子设备可以根据界面元素的尺寸和“重力”确定界面切换时的动画效果。

示例性的，电子设备可以根据距离和“重力”确定界面切换时的动画效果。

应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据界面元素的尺寸和“重力”确定界面切换时的动画效果以及根据距离和“重力”确定界面切换时的动画效果的描述，可以参考针对根据界面元素的尺寸和“摩擦力”确定界面切换时的动画效果以及根据距离和“摩擦力”确定界面切换时的动画效果的描述。

需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定界面切换时的动画效果。

上文介绍了影响界面切换时的动画效果的因素，下面将介绍本申请实施例提供的几种界面切换的形式。

图16示出了本申请实施例提供的一种界面切换的形式的示意图。

如图16中的(a)所示，电子设备显示有界面1601，并在界面1601上显示有控件1602，例如控件1602可以是应用图标。电子设备可以响应于检测到用户点击控件1602的操作，将界面由界面1601切换至控件1602对应的界面，即图16中的(b)-(d)所示的界面1603。

如图16中的(b)-(d)所示，电子设备可以响应于检测到用户点击控件1602的操作，以控件1602的位置为发起点逐步增大界面1603的面积以替换界面1601，其中界面1603为控件1602对应的界面。

图16中的(b)-(d)，电子设备在由界面1601切换至界面1603的过程中，电子设备以控件1602的位置为发起点逐步增大界面1603的面积，但本申请实施例并不限定于此，例如如图16中的(e)-(g)所示，电子设备也可以以屏幕的中心为发起点逐步增大界面1603的面积以替换界面1601。

在一些实施例中，界面切换过程中的界面切换速度可以与控件1602相关。

示例性的，界面切换速度可以与控件1602的尺寸相关。如图16中的(a)-(d)所示，假设控件1602的尺寸为R1，当用户点击控件1602，电子设备可以显示界面1603，在t1时刻，界面1603的尺寸为R2，即如图16中的(b)所示的尺寸，在t2时刻，界面1603的尺寸为R3，即如图16中的(c)所示的尺寸。若如图16中的(i)所示，控件1602的尺寸增加为R4，当用户点击控件1602，电子设备可以显示界面1603，且t1时刻，界面1603的尺寸R5＞R2，即如图16中的(j)所示的尺寸，在t3时刻，界面1603的尺寸R6＞R3，即如图16中的(k)所述的尺寸。换句话说，当控件1603的尺寸增加，界面切换的速度也可以增加。

需要说明的是，上述示例仅以控件1603的尺寸越大，界面切换的速度越快为例，但本申请实施例并不限定于此，例如，在另一些实施例中，控件1603的尺寸越大，界面切换的速度越慢。

在一些实施例中，界面切换过程中的界面尺寸时间曲线可以与控件1602相关。

例如，图16中的(m)示出了界面1603的尺寸时间曲线，其中第三曲线为控件1602的尺寸为R1对应的尺寸时间曲线，第四曲线为控件1602的尺寸为R4对应的尺寸时间曲线。由图16中的(m)可知，若控件1602的尺寸为增大，界面1603最初在显示在界面中的尺寸也可以增大，且由于控件1602的尺寸改变，虽然界面1603最终铺满界面的时间不变，但其中的尺寸时间曲线的曲率是不同的。

还需要说明的是，控件1602的尺寸不仅影响界面切换过程中的界面切换速度，还可以影响界面切换过程中的界面透明度的变化。

在一些实施例中，界面切换过程中的界面的透明度的变化速度可以与控件1602的尺寸相关。

如图16中的(a)-(d)所示，假设控件1602的尺寸为R1，当用户点击控件1602，电子设备可以显示界面1603，在t1时刻，即如图16中的(b)所示的界面1603的透明度为T1，在t2时刻，即如图16中的(c)所示的界面1603的透明度为T2。若如图16中的(i)所示，控件1602的尺寸增加为R4，当用户点击控件1602，电子设备可以显示界面1603，且t1时刻，即如图16中的(j)所示的界面1603的透明度为T3，T3＜T1，在t2时刻，即如图16中的(k)所示的界面1603的透明度为T4，T4＜T2。

在一些实施例中，界面切换过程中的透明度时间曲线可以与控件1602的尺寸相关。

针对上述界面切换过程，图16中的(n)示出了界面1603的透明度时间曲线，其中第五曲线为控件1602的尺寸为R1对应的透明度时间曲线，第六曲线为控件1602的尺寸为R4对应的透明度时间曲线。由图16中的(n)可知，若控件1602的尺寸为增大，其透明度时间曲线的曲率增大，最终透明度降为0的时间可以不变。

图17示出了本申请实施例提供的另一种界面切换的形式的示意图。

如图17中的(a)所示，电子设备显示有界面1701，电子设备可以响应于检测到用户向左滑动的操作，进行界面的切换，界面切换的过程可以如图17中的(b)和(c)所示。

如图17中的(b)和(c)所示，电子设备响应于检测到用户向左滑动的操作，可以使得界面1702从右侧逐步滑入，界面1701从左侧逐步滑出，并最终显示界面1702。

界面1702的移动可以理解为受到界面1701的影响而移动，在一些实施例中，界面1701和界面1702在移动过程中，如图17中的(b)和(c)所示，界面1701的初速度可以快于界面1702的初速度，则界面1701和界面1702之间的距离可以先变大，然后界面1702的速度可以增加至超过界面1701的速度，则界面1701可界面1702之间的距离可以再变小，然后两者之间的距离变小至预设距离后，该预设距离可以是0，界面1701和界面1702的速度保持一致，并最终完成界面的切换。

针对上述界面的移动过程，图17中的(h)示出了一种界面的位移时间曲线，其中第七曲线为界面1702的位移时间曲线，第八曲线为界面1701的位移时间曲线，由图17中的(h)所示，两条曲线在同一时刻的位移差值可以理解为界面1701和界面1702之间的距离，因此由图可知，界面1701和界面1702在移动过程中，两者之间的距离可以先变大，然后在减小至0。两者之间的距离减小为0可以理解为已完成了界面的切换。

图17中的(i)示出了另一种界面的位移时间曲线，其中第九曲线为界面1701的位移时间曲线，第十曲线为界面1702的位移时间曲线，由图17中的(i)所示，两条曲线在同一时刻的位移差值可以理解为界面1701和界面1702之间的距离，若在未移动时界面1701和界面1702之间的距离可以是0，因此由图可知，界面1701和界面1702在移动过程中，界面1702在同一时刻的位移向大于界面1701在该时刻的位移，则界面1702可以覆盖在界面1701之上，随着继续移动，界面1702覆盖在界面1701之间的面积可以减小，即两者之间的距离增大，当两种之间的距离增大为0时完成了界面的切换。

在另一些实施例中，界面1702的移动速度可以快于界面1701的移动速度，则界面1701可以与界面1702发生部分重叠，并最终完成界面的切换。

例如，界面1701包括5个界面元素，界面1702包括3个界面元素，且考虑界面元素的“重力”和动摩擦因素，假设界面1701中的5个界面元素中的每一个界面元素与界面1702中的3个界面元素中的每一个界面元素的“重力”、动摩擦因数相同，则界面1701的“摩擦力”＞界面1702的“摩擦力”，在两者之间的“引力”相等的情况下，界面1702的加速度＞界面1701的加速度，则界面1702的速度可以快于界面1701的移动速度，从而两个界面发生部分重叠。

在另一些实施例中，界面1702的移动速度可以慢于界面1701的移动速度，则界面1701与界面1702之间的距离可以一直增大，并最终完成界面的切换。

图17中的(b)和(c)，电子设备响应于检测到用户向左滑动的操作，将界面1701切换为界面1702，但本申请实施例并不限定于此，例如电子设备也可以响应于检测到用户向除左以外的其他方向滑动，进行界面切换。如图17中的(d)-(f)所示，电子设备可以响应于检测到用户向下滑动的操作，可以使得界面1702从上侧逐步滑入，界面1701从下侧逐步滑出，并最终显示界面1702。在图17中的(d)-(f)所示，界面1702可以覆盖在界面1701之上。

如图16和图17所示的界面切换的形式，电子设备在进行界面切换时会出现一个新的界面以替代切换前的界面，但本申请实施例对此不作限定，例如，在一些实施例中，电子设备可以通过切换界面中的界面元素以实现界面切换的效果。示例性的，图18示出了本申请实施例提供的另一种界面切换的形式。如图18中的(a)，电子设备显示有界面1801，并在界面1801上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素。电子设备可以响应于检测到用户切换界面的操作，电子设备可以在界面1801调整类型#1的界面元素、类型#2的界面元素和类型#3的界面元素的位置以实现界面切换的效果。

本申请实施例中将自然界中多个力的概念引入到了界面元素中，使得在进行界面切换时，界面元素之间可以联动，且联动的动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。

下面将结合应用场景介绍本申请实施例提供的界面切换的方法。

图19示出了本申请实施例提供的一组GUI。

图19所示的应用场景为具有层级结构的界面，即可以认为是在同一个应用程序中的界面的切换。如图19中的(a)所示，电子设备显示有界面1901，界面1901是设置界面，电子设备可以在界面1901上显示多个界面元素，例如文本界面元素1902、搜索栏、卡片等界面元素。电子设备可以响应于检测到用户点击蓝牙1903的操作，可以逐步从右侧显示界面1904。

如图19中的(b)和(c)所示，电子设备响应于检测到用户点击蓝牙1903的操作，可以从右侧逐步显示界面1904，并最终在屏幕上显示界面1904。界面1904是蓝牙的设置界面。电子设备可以在界面1904上显示多个界面元素，例如文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909。

电子设备在由界面1901切换至界面1904的过程中，文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909之间的移动可以符合上文所述的界面切换时的动画效果。

示例性的，电子设备在由界面1901切换至界面1904的过程中，在划分界面元素时，可以将文本界面元素1902和文本界面元素1905划分为主界面元素，其他的在界面1901或界面1904的界面元素为次界面元素，则界面元素1906、界面元素1907、界面元素1908、界面元素1909可以理解为由于受到了文本界面元素1905的“引力”的移动。下面结合图19中的(d)-(f)介绍文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动过程。

需要说明的是，为了便于体现文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动过程，图19中的(d)-(f)仅示出了界面1905以及文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909。

如图19中的(d)所示，文本界面元素1905是主界面元素，文本界面元素1905可以先于次界面元素移动，而次界面元素移动由于受到文本界面元素1905的“引力”的作用发生移动。因此，在同一时间段内，文本界面元素1905的移动距离大于界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动距离。在一些实施例中，界面元素1906、界面元素1907、界面元素1908、界面元素1909在同一时间段内的移动距离相同，移动的速度也可以相同。

在另一些实施例中，界面元素1906与文本界面元素1905之间的距离＜界面元素1907与文本界面元素1905之间的距离＜界面元素1908与文本界面元素1905之间的距离＜界面元素1909与文本界面元素1905之间的距离，则界面元素1906受到的“引力”＞界面元素1907受到的“引力”＞界面元素1908受到的“引力”＞界面元素1909受到的“引力”，因此如图19中的(e)所示，在同一时间段内界面元素1906的移动距离＞界面元素1907的移动距离＞界面元素1908的移动距离＞界面元素1909的移动距离，且界面元素1906的移动速度＞界面元素1907的移动速度＞界面元素1908的移动速度＞界面元素1909的移动速度。

随着文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动至目标位置，最终电子设备可以显示如图19中的(f)所示的GUI。

需要说明的是，界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动轨迹可以是直线，也可以是曲线，曲线的弯曲方向可以朝向文本界面元素1905，或曲线的弯曲方向可以远离界面元素1905。

还需要说明的是，上述仅以距离影响次界面元素的移动为例，但本申请实施例并不限定于此，上文所述的其他因素也可以影响次界面元素的移动。

示例性的，界面元素的尺寸可以影响次界面元素的移动。由图19中的(f)所示，界面元素1907的尺寸大于界面元素1906的尺寸，而界面元素1906与文本界面元素1905之间的距离＜界面元素1907与文本界面元素1905之间的距离，在一些实施例中，界面元素1906受到的“引力”可以＜界面元素1907受到的“引力”，因此，在同一时间段内，界面元素1907的移动距离＞界面元素1906的移动距离，且界面元素1907的移动速度＞界面元素1906的移动速度。

示例性的，“摩擦力”可以影响次界面元素的移动。由图19中的(f)所示，界面元素1907与文本界面元素1905之间的距离＜界面元素1908与文本界面元素1905之间的距离，且界面元素1907的尺寸与界面元素1908的尺寸相同，则界面元素1907受到的“引力”＞界面元素1908受到的“引力”。若定义界面元素1908的“摩擦力”＜界面元素1906的“摩擦力”，在一些实施例中，由于界面元素1908的“摩擦力”＜界面元素1906的“摩擦力”因此，在同一时间段内，界面元素1908的移动距离＞界面元素1907的移动距离，且界面元素1908的移动速度＞界面元素1907的移动速度。

在另一些实施例中，若界面元素1907受到的“引力”小于界面元素1907的“摩擦力”，则界面元素1907可以先不移动，电子设备可以增大界面元素1907受到的“引力”或减小界面元素1907的“摩擦力”，则界面元素1907可以开始向目的位置移动，从而使得界面元素1907晚于其他界面元素的移动，换句话说，界面元素1907的移动存在时延。

在另一些实施例中，界面元素1907的时延也可以理解为“引力”的传播需要时间，由于界面元素1907距离界面元素1908较远，则界面元素1907受到“引力”的传播时间较长，则界面元素1907的移动存在时延。

需要说明的是，在由界面1901切换至界面1904的过程中，不仅界面1907中的多个界面元素由于“引力”的存在发生联动，界面1901和界面1904也存在动画切换效果，例如，界面1901和界面1904之间的距离可以先变大再变小，具体描述可以参见针对图17的描述。

本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。

图20示出了本申请实施例提供的一组GUI。

图20所示的是跨应用程序的界面切换场景。如图20中的(a)所示，电子设备显示有界面2001，界面2001是短信应用程序的界面，电子设备可以在界面2001上显示多个界面元素，例如短信2002。电子设备可以响应于检测到用户点击短信2002的操作，可以显示如图20中的(b)所示的GUI。

如图20中的(b)和(c)所示，电子设备响应于检测到用户点击短信2002的操作，可以跳转显示短信2002对应的界面，即界面2003。界面2003是音乐应用程序的界面。电子设备可以在界面2003上显示多个界面元素，例如文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007。

电子设备在由界面2001切换至界面2003的过程中，文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007之间的移动以及界面2003的尺寸变化、透明度变化等可以符合上文所述的界面切换时的动画效果。

示例性的，电子设备在由界面2001切换至界面2003的过程中，在划分界面元素时，可以将短信2002和图片界面元素2005划分为主界面元素，其他的在界面2001或界面2003的界面元素为次界面元素，则文本界面元素2004、文本界面元素2006、控件界面元素2007可以理解为由于受到了图片界面元素2005的“引力”的移动。

可以理解的是，文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007的类似于针对图19的描述，为了简洁，在此不再赘述。

图21示出了本申请实施例提供的一组GUI。

如图21中的(a)-(b)所示，电子设备显示有界面2101，电子设备可以在界面2101上显示天气卡片，由于电子设备在界面2101上显示的是一整张天气卡片，因此也可以将界面2101称为天气卡片2101。当电子设备检测到用户退出天气卡片2101的操作时，电子设备可以缩小天气卡片2101的尺寸。

如图21中的(c)所示，当天气卡片2101的尺寸缩小到阈值时，电子设备可以改变天气卡片2101显示的内容，并且可以将天气卡片2101设置为主界面元素，则天气卡片2103、由于受到“引力”的影响可以从天气卡片2101的上方逐步靠近天气卡片2101，天气卡片2104、天气卡片2105可以从天气卡片2101的下方逐步靠近天气卡片2101。

天气卡片2103、天气卡片2104、天气卡片2105的移动过程可以与上文所述的影响因素有关。

示例性的，由于天气卡片2103、天气卡片2104与天气卡片2101之间的距离小于天气卡片2105与天气卡片2101之间的距离，且天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同，则天气卡片2103、天气卡片2104受到的“引力”大于天气卡片2105受到的“引力”，则天气卡片2103、天气卡片2104的移动速度可以大于天气卡片2105的移动速度，天气卡片2103、天气卡片2104在相同时间段内移动的距离大于天气卡片2105移动的距离，且天气卡片2104与天气卡片2101之间的距离小于天气卡片2104与天气卡片2105之间的距离。

示例性的，由于天气卡片2101的尺寸不断减小，天气卡片2103、天气卡片2104、天气卡片2105受到的“引力”和移动速度也可以不断减小，当天气卡片2101的尺寸缩小至与天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同时，天气卡片2103、天气卡片2104、天气卡片2105可以移动到目标位置并不再继续移动。

可以理解的是，电子设备还可以结合上述所述的任意影响因素确定上述天气卡片的移动效果，为了简洁，在此不再赘述。

如图21中的(d)所示，随着天气卡片2101的尺寸的进一步缩小，其尺寸可以与天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同且界面2102中的相邻的两个天气卡片之间的距离可以相等。

在另一些实施例中，天气卡片2101、天气卡片2103、天气卡片2104、天气卡片2105中的相邻啷个天气卡片之间的距离可以不相等。

图22示出了本申请实施例提供的一组GUI。

如图22中的(a)所示，电子设备显示有界面2201，界面2201为日历界面，电子设备可以在界面2201上显示有文本界面元素2202、文本界面元素2203、文本界面元素2204以及12个用于表示不同月份的界面元素。当电子设备检测到用户向左滑动的操作，响应于该操作，电子设备可以改变文本界面元素2202和文本界面元素2203的内容，并切换12个用于表示不同月份的界面元素。

示例性的，电子设备在切换12个用于表示不同月份的界面元素时，可以以1月、4月、7月、10月对应的界面元素为主界面元素，则其他界面元素由于受到1月、4月、7月、10月对应的界面元素的“引力”的影响而发生移动，其移动的动画效果可以根据上文所述的因素确定。

示例性的，电子设备在切换12个用于表示不同月份的界面元素时，可以将1月、4月、7月、10月对应的界面元素划分为类型#1的界面元素，将2月、5月、8月、11月对应的界面元素划分为类型#2的界面元素，将3月、6月、9月、12月对应的界面元素划分为类型#3的界面元素，并可以以类型#1的界面元素为“引力”发生中心点，则类型#2的界面元素和类型#3的界面元素由于受到类型#1的界面元素的“引力”的影响而发生移动，其移动的动画效果可以根据上文所述的因素确定。

上文示例性的介绍了几种界面切换的应用场景，下面将介绍界面切换的动画控制逻辑以及界面元素移动时的位移时间曲线。

图23示出了根据本申请实施例的界面切换的动画效果的动画过程和相关控制逻辑的示意图。在电子设备的操作***中，动画本质上就是根据刷新率实时显示当前的界面或者控件，利用人类的视觉暂留原理，使得用户感觉所显示的画面就是运动的。因此，如图23所示，电子设备可以首先确定动画的初态2310和动画的终态2320。另外，电子设备可以确定从联动动画的初态2310变换到联动动画的终态2320的过程持续的动画时间2305。再者，电子设备还可以确定动画类型2330和动画变换形式2340。例如，动画类型2330可以包括界面元素的位移动画2332、缩放动画2334、旋转动画2336、透明动画2338等，而动画变换形式2340可以通过插值器2342和估值器2344来控制，例如在固定的动画时间2305里进行相关变换速度的控制等，对于本申请实施例而言，变换速度可以是界面元素的移动速度。

在本申请实施例中，为了实现界面切换的动画效果，主要是涉及到动画类型2330中的位移动画2332、缩放动画2334、透明动画2338，但是应当理解，其他的联动动画类型也可以可能的。如上文描述的，本申请实施例中界面切换的动画效果产生的位移动画效果可以是在界面切换时，次界面元素受到主界面元素的影响而发生移动。在一些实施例中，次界面元素可以先朝向主界面元素移动，然后再以相反的方向移动直至达到目的位置。在另一些实施例中，次界面源可以朝向主界面源的方向移动一定距离后停止。

针对界面元素先朝向某一个方向移动，然后再以相反的方向复位这一情况，两段动画可以分别定义时长和插值器，应用侧可以按需进行调节。应理解，电子设备可以采用已知的或未来发现的任何适当的位移时间曲线来控制界面元素的移动细节。在一些实施例中，电子设备可以选择使用贝塞尔曲线或弹性力曲线作为界面元素的移动曲线。例如，电子设备可以使用二阶贝塞尔曲线来控制界面元素先朝向某一个方向移动，并且使用弹性力曲线来控制界面元素的复位，或者反之亦然。当然，在其他实施例中，电子设备也可以使用贝塞尔曲线或弹性力曲线之一来控制向某一个方向移动以及控制界面元素的复位。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制界面元素的移动，使得联动动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。下文将结合图24来描述电子设备基于二阶贝塞尔曲线来控制界面元素朝向某一个方向移动的示例，以及描述电子设备基于弹性力曲线来控制界面元素复位的示例。

图24中的(a)示出了根据本申请实施例的界面元素的位移随时间变化曲线为贝塞尔曲线的示意图。在图24中的(a)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。在一些实施例中，用于控制界面元素移动的插值器可以使用常见的曲线插值器。

具体地，电子设备可以通过选择二阶贝塞尔曲线的两个二阶的点，从而达到界面元素的不同移动效果。以此方式，位移时间曲线与时间的相互配合将会产生运动的韵律感。电子设备调整位移时间曲线可以使界面元素实现加速和减速，而不是以恒定的速率移动。

需要说明的是，本申请实施例仅以二阶贝塞尔曲线作为位移时间曲线描述了一些示例，但是本申请实施例不限于此，而是可以等同地将任何曲线形式作为位移时间曲线来实现界面元素的移动。例如，这样的曲线形式包括但不限于一阶贝塞尔曲线、三阶或更高阶贝塞尔曲线、其他已知的或未来发现的其他曲线形式、或者直线。

图24中的(b)示出了根据本申请实施例的界面元素的位移随时间变化义曲线为临界阻尼弹性力曲线的示意图。一般地，弹性力曲线在不同的操作场景可以使用不同的状态，也即，临界阻尼、欠阻尼和过阻尼。在不同的阻尼状态下，位移时间的弹性力曲线可以是不一样的。具体地，三种情况如下：阻尼的平方等于4倍的质量乘以刚性，这是临界阻尼。进一步地，如果阻尼大就是过阻尼，刚性大就是欠阻尼。特别地，阻尼的平方小于4倍质量乘以刚性为欠阻尼，而阻尼的平方大于4倍的质量乘以刚性为过阻尼。在图24中的(b)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。应当理解，尽管图24中的(b)将本申请实施例的界面元素复位的位移时间曲线示例性地描绘为临界阻尼弹性力曲线，但是本申请实施例不限于此，而是等同地适用于任何其他的曲线，例如还可以是如图24中的(c)示出的欠阻尼弹性力曲线或如图24中的(d)示出的过阻尼弹性力曲线。

在一些实施例中，弹性引擎差值其的相关设置如下：

代码类的实现：

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()；

图25示出了根据本申请实施例的界面切换的动画效果相关联的界面切换框架与应用侧之间的关系的示意图，电子设备切换的界面可以是***界面，也可以是第三方应用程序的界面。如图25所示，界面切换框架2501可以提供动画效果能力。界面切换框架2501可以采用AAR形式2502、JAR形式2503和***接口2504。应用侧可以通过集成2505和/或调用2507的方式来使用界面切换框架2501提供的动画效果。也就是说，界面切换框架2501可以采用AAR、JAR、***接口的形式来提供动画效果的能力，应用2506集成之后可以应用在领域内需要的各种场景。

图26示出了根据本申请实施例的用于实现动画效果能力或功能的***框架的示意图。在一些实施例中，联动框架的动效能力的是基于电子设备的操作***(例如，安卓或者鸿蒙)的整体架构来实现的，可以包含主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户可以主要在应用程序层使用和体验动效的功能。在本申请实施例中，界面和联动框架的能力交互关系如图26所描绘。具体地，如图26所示，该***框架可以包括应用程序层2610、应用程序框架层2630、硬件抽象层2650、以及内核层2670。应用程序层2610可以包括应用2612。应用上可以进行界面切换2614。应用程序框架层2630可以包括***服务2632和扩展服务2634。***服务2632可以包括各种***服务，例如Service 2633。扩展服务2634可以包括各种扩展服务，例如HwSDK 2635。硬件抽象层(HAL)2650可以包括HAL3.02652和算法2654，本申请实施例对于算法不作限定。内核层2670可以包括驱动2672和物理设备2674。物理设备2674可以向驱动2672提供原始参数流，而驱动2672可以向物理设备2674提供功能处理参数流。如图26进一步示出的，用于实现界面切换框架2625的联动框架2626可以实现在应用程序层2610与应用程序框架层2630之间。UI框架2626可以包括平台能力2622和***能力2624，两者可以用于提供界面切换框架2625。界面切换框架2625进而可以提供给应用程序层2610的界面切换2614。

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

下面将介绍本申请实施例界面切换框架的相关设置。

表1为本申请实施例提供的模型表。

表2联动模型表

本申请实施例中的界面切换框架可以包括多个模型，其中自定义模型可以是由开发者自定义的，开发者可以通过自定义模型影响界面元素的移动。

例如，界面切换框架包括引力模型和摩擦力模型，则电子设备在进行界面切换确定界面元素的动画效果时，可以基于界面元素的受到的“引力”和“摩擦力”确定界面元素的动画效果。

表2为本申请实施例提供的动画效果参数。

表2动画参数表

序号	动画参数
		1	刷新频率
2	屏幕大小
		3	屏幕比例
4	性能
		5	时长
6	插值器
		7	变化幅度范围
8	自定义

本申请实施例中可以通过改变动画参数以调整动画效果的实现细节，例如，电子设备的屏幕大，动画效果的变化幅度也可以增大，以保证用户可以看清动画效果的细节。

需要说明的是，上述动画参数表仅为示例，本申请实施例中的动画参数可以包括上述部分或全部的参数，还可以包括其他参数，例如屏幕材质。

本申请实施例还针对不同的联动模型提供了不同的参数设置。

例如，表3所示为引力模型的参数配置。

表3引力模型参数表

序号	动画参数
		1	时间
2	范围
		3	影响因子
4	大小

其中，时间参数可以指示产生“引力”的时间。范围参数可以指示“引力”的范围。影响因子可以影响“引力”的大小，范围参数、时间参数等，例如影响因子可以是界面元素之间的距离、界面元素的尺寸等上文示出的影响因素。

在一些实施例中，本申请实施例中，可以将其他联动模型量化为影响因子，从而电子设备可以通过影响因子改变引力模型中的参数，进而确定界面元素的动画效果。

电子设备在进行界面切换确定界面元素的移动动画效果，可以确定上述的界面切换框架的相关设置，然后电子设备解析上述界面切换框架中的相关设置以确定界面元素的动画效果，从而可以完成界面切换。

上文介绍了界面切换时界面元素的动画效果，界面切换的应用场景、界面切换框架设置等，下面将介绍本申请实施例提供的界面显示方法的示意性流程图。

图28示出了本申请实施例提供的界面切换的显示方法的示意性流程图，如图28所示，该方法包括：

S2801，显示第一界面。

示例性的，电子设备可以显示第一界面，该界面包括M个界面元素，M≥1且为整数。

例如，如图5所示，电子设备可以显示界面501，并在界面501显示有多个界面元素。

S2802，检测到用户切换第二界面的操作。

示例性的，电子设备可以检测到用户切换第二界面的操作。

例如，如图16中的(a)所示，电子设备检测到用户点击界面元素1602的操作。

再例如，图17中的(a)所示，电子设备检测到用户向左滑动的操作。

需要说明的是，本申请实施例中对于切换第二界面的操作的方式不作限定，例如用户还可以通过隔空手势、语音指令等切换第二界面。

第二界面是切换后的界面，其中第二界面包括N个界面元素，N≥1且为整数。

S2803，响应于用户的操作，根据M个界面元素和N个界面元素确定第一联动切换动画效果。

在一些实施例中，电子设备根据M个界面元素确定第一主界面元素和第一主界面元素的位置；根据N个界面元素确定第二主界面元素、N-1个第二次界面元素、第二主界面元素的位置；根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的动画效果；根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果。

例如，如图9所示，电子设备确定界面901中的界面元素905、界面907中的界面元素908为主界面元素。在由界面901切换至界面907的过程中，主界面元素由在界面901的位置移动到了在界面907的位置，则电子设备可以确定界面元素908的动画效果，即移动轨迹和移动速度，移动轨迹可以是曲线或直线，移动速度可以是预设的。界面907中的其他界面元素为次界面元素，次界面元素在界面907中的位置是确定好的，次界面元素在向确定好的位置移动时，由于受到界面元素908的影响，其移动轨迹和移动速度可以发生改变，即动画效果发生改变。

在一些实施例中，根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果，包括：

根据第一界面切换参数确定每一个次界面元素的动画效果。

第一界面切换参数包括以下中的至少一项：第二主界面元素的尺寸、每一个次界面元素的尺寸、第二主界面元素与每一个次界面元素之间的距离、每一个次界面元素的限制参数、第二主界面元素的动画效果。每一个次界面元素的限制参数可以理解为电子设备设定的限制每一个次界面元素移动的参数。例如，每一个次界面元素的限制参数可以是每一个次界面元素的“摩擦力”和/或“重力”。

示例性的，若第一界面切换参数为第二主界面元素与每一个次界面元素之间的距离，则电子设备根据第二主界面元素和每一个次界面元素的距离确定每一个次界面元素的动画效果。

例如，如图9所示，由于界面元素908与界面元素910之间的距离小于界面元素908与界面元素911之间的距离，则界面元素910的移动速度可以大于界面元素911的移动速度，界面元素910的移动轨迹的曲率可以大于界面元素911的移动轨迹的曲率。

示例性的，若第一界面切换参数为第二主界面元素的动画效果，则电子设备可以根据第二主界面元素的动画效果和每一个次界面元素确定每一个次界面元素的动画效果。

例如，如图9所示，电子设备确定第二主界面元素的动画效果后，即确定了第二主界面元素的移动轨迹和移动速度，则电子设备可以使得次界面元素的移动轨迹的曲率与第二主界面元素的移动轨迹的曲率相同，次界面元素的移动速度与第二主界面元素的移动速度相同。

应理解，上文所述仅为示例，针对第一界面切换参数的具体描述可以参见上文，在此不再赘述。

在一些实施例中，电子设备根据M个界面元素确定第一主界面元素和第一主界面元素的位置，包括：

电子设备根据第一界面的视觉中心确定第一主界面元素和所述第一主界面元素的位置；

电子设备根据N个界面元素确定第二主界面元素和第二主界面元素的位置，包括：

电子设备根据第二界面的视觉中心确定第二主界面元素和第二主界面元素的位置。

在一些实施例中，电子设备根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的动画效果，包括：

电子设备根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的移动轨迹和第二主界面的移动速度。

在一些实施例中，该方法还包括：

电子设备根据M个界面元素确定M-1个次界面元素；

电子设备根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：

电子设备根据所述第二主界面元素、N-1个次界面元素中的每一个次界面元素、M-1个次界面元素中的每一个界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果。

例如，电子设备在由第一界面切换至第二界面时，可以将N-1个次界面元素初始位置设定为M-1个次界面元素中的一个或多个界面元素在第一界面的位置。

在一些实施例中，响应于操作，根据M个界面元素和N个界面元素确定联动切换动画效果，包括：

将M个界面元素和N个界面元素划分为L个类型的界面元素，其中L≥1且为整数；确定L个类型的界面元素的每一个类型的界面元素在第一界面和第二界面的位置；在第二界面元素确定第一位置集，第一位置集包括第二界面中的任意的一个或多个位置；根据第一位置集、每一个类型的界面元素在第一界面的位置和每一个类型的界面元素在第二界面的位置确定N个界面元素的动画效果。

在一些实施例中，第一位置集包括的一个或多个位置为N个界面元素中的一个或多个界面元素在第二界面对应的位置。

例如，如图8所示，电子设备将界面801和界面806中的界面元素划分为4个类型的界面元素。电子设备可以分别确定4个类型的界面元素在界面801和界面806的位置，并确定第一位置集，第一位置集中的位置是“引力”的发生中心点，该第一位置集中的位置可以是固定位置，也可以是移动位置，如图8所示，类型#3的界面元素在界面806的位置为第一位置，或类型#3的界面元素移动过程中对应的位置为第一位置。电子设备在确定“引力”发送中心点，即第一位置后，4个类型的界面元素可以由在界面801的位置移动至在界面806的位置。针对界面元素移动的描述可以参见上文，为了简洁，在此不再赘述。

可选的，在一些实施例中，根据第一位置、每一个类型的界面元素在第一界面的位置和每一个类型的界面元素在第二界面的位置确定N个界面元素的动画效果，包括：

根据第二界面切换参数确定N个界面元素的动画效果。

第二界面切换参数包括以下中的至少一项：该一个或多个界面元素的尺寸、每一个类型的界面元素的尺寸、第一位置集中的一个或多个位置与每一个类型的界面元素之间的距离、每一个类型的界面元素的限制参数、第一界面元素的动画效果。每一个类型的界面元素的限制参数可以理解为电子设备设定的限制每一个类型的界面元素移动的参数。例如，每一个类型的界面元素的限制参数可以是每一个类型的界面元素的“摩擦力”和/或“重力”。

示例性的，若第二界面切换参数为第一位置与每一个类型的界面元素之间的距离，则电子设备根据第一位置与每一个类型的界面元素之间的距离确定每一个类型的界面元素的动画效果。

例如，如图11所示，以类型#1的界面元素在界面1104的位置为第一位置为例，若类型#2的界面元素与第一位置的距离由d1变为d2，则类型#2的界面元素的移动轨迹的曲率可以变小，移动速度也可以变小。

示例性的，若第二界面切换参数为第一界面元素的动画效果，则电子设备可以根据第一界面元素的动画效果和每一个类型的界面元素确定每一个类型的界面元素的动画效果。

例如，如图8所示，以第一界面元素为类型#3的界面元素为例，若类型#3的界面原的移动速度增加，类型#1的界面元素、类型#2的界面元素、类型#3的界面元素的速度也可以增加。

应理解，上文所述仅为示例，针对第二界面切换参数的具体描述可以参见上文，在此不再赘述。

在一些实施例中，将M个界面元素和N个界面元素划分为L个类型的界面元素，包括：

根据相似度将M个界面元素和N个界面元素划分为L个类型的界面元素。

在一些实施例中，相似度包括颜色相似度、尺寸相似度、形状相似度。

确定M个界面元素在第一界面的位置和N个界面元素在第二界面的位置；

根据M个界面元素在第一界面的位置和N个界面元素在第二界面的位置将M个界面元素和N个界面元素划分为L个类型的界面元素。

确定M个界面元素和N个界面元素的标签；

根据M个界面元素和N个界面元素的标签将M个界面元素和N个界面元素划分为L个类型的界面元素。

应理解，针对将M和界面元素和N个界面元素划分为L个类型的界面元素的描述可以参加上文，为了简洁，在此不再赘述。

S2804，根据第一联动切换动画效果将第一界面切换至第二界面。

电子设备确定第一联动切换动画效果后可以将第一界面切换至第二界面，其中包括了界面的切换动画，即如图16和图17所示的GUI，以及界面元素的切换动画。

在一些实施例中，N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。

在一些实施例中，方法还包括：

若检测到电子设备的类型由第一类型变为第二类型，将第一界面切换效果切换为第二界面切换效果；

根据第一联动切换动画效果将第一界面切换至第二界面，包括：

根据第二联动切换动画效果将第一界面切换至第二界面。

本申请实施例还提供了一种电子设备，包括用于实现上述方法实施例涉及的各步骤的功能模块。需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。本申请实施例提供的电子设备，用于执行上述界面显示的方法，因此可以达到与上述相同的效果。

本申请实施例还提供了一种电子设备，包括：处理器、存储器、应用程序以及计算机程序。上述各器件可以通过一个或多个通信总线连接。其中，该一个或多个计算机程序被存储在上述存储器中并被配置为被该一个或多个处理器执行，该一个或多个计算机程序包括指令，上述指令可以用于使电子设备执行上述各实施例中电子设备的各个步骤。

示例性的，上述处理器具体可以为图1所示的处理器110，上述存储器具体可以为图1所示的内部存储器120和/或与电子设备连接的外部存储器。

本申请实施例还提供一种芯片，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如前文中任一种可能的实现方式中所述的界面显示的方法被执行。

本实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的界面显示的方法。

本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面显示的方法。

以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

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

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

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

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims

1.一种界面切换的显示方法，其特征在于，所述方法包括：

电子设备显示第一界面，所述第一界面包括M个界面元素，M≥1且为整数；

所述电子设备检测到用户切换第二界面的操作，所述第二界面包括N个界面元素，N≥1且为整数；

所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果；

所述电子设备根据所述第一联动切换动画效果将所述第一界面切换至所述第二界面。

2.根据权利要求1所述的方法，其特征在于，所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果，包括：

所述电子设备根据所述M个界面元素确定第一主界面元素和所述第一主界面元素的位置；

所述电子设备根据所述N个界面元素确定第二主界面元素、所述第二主界面元素的位置、N-1个次界面元素；

所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定第二主界面元素的动画效果；

所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果。

3.根据权利要求2所述的方法，其特征在于，所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：

所述电子设备根据第一界面切换参数确定所述每一个次界面元素的动画效果，其中所述第一界面切换参数包括以下中的至少一项：所述第二主界面元素的尺寸、所述每一个次界面元素的尺寸、所述第二主界面元素与所述每一个次界面元素之间的距离、所述每一个次界面元素的限制参数、所述第二主界面元素的动画效果。

4.根据权利要求2或3所述的方法，其特征在于，所述电子设备根据所述M个界面元素确定第一主界面元素和所述第一主界面元素的位置，包括：

所述电子设备根据所述第一界面的视觉中心确定所述第一主界面元素和所述第一主界面元素的位置；

所述电子设备根据所述N个界面元素确定第二主界面元素和所述第二主界面元素的位置，包括：

所述电子设备根据所述第二界面的视觉中心确定所述第二主界面元素和所述第二主界面元素的位置。

5.根据权利要求2至4中任一项所述的方法，其特征在于，所述每一个次界面元素的动画效果包括所述每一个次界面元素的移动轨迹和/或所述每一个次界面元素的移动速度，其中所述每一个次界面元素的移动轨迹是弯曲的。

6.根据权利要求2至5中任一项所述的方法，其特征在于，所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定第二主界面元素的动画效果，包括：

所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定所述第二主界面元素的移动轨迹和所述第二主界面的移动速度。

7.根据权利要求2至6中任一项所述的方法，其特征在于，所述方法还包括：

所述电子设备根据所述M个界面元素确定M-1个次界面元素；

所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：

所述电子设备根据所述第二主界面元素、所述N-1个次界面元素中的每一个次界面元素、所述M-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果。

8.根据权利要求1所述的方法，其特征在于，所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果，包括：

所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，其中L≥1且为整数；

所述电子设备确定所述L个类型的界面元素的每一个类型的界面元素在所述第一界面和所述第二界面的位置；

所述电子设备在所述第二界面中确定第一位置集，所述第一位置集包括所述第二界面中的任意的一个或多个位置；

所述电子设备根据所述第一位置集、所述每一个类型的界面元素在所述第一界面的位置和所述每一个类型的界面元素在所述第二界面的位置确定所述N个界面元素的动画效果。

9.根据权利要求8所述的方法，其特征在于，所述第一位置集包括的一个或多个位置为所述N个界面元素中的一个或多个界面元素在所述第二界面对应的位置。

10.根据权利要求9所述的方法，其特征在于，所述电子设备根据所述第一位置集、所述每一个类型的界面元素在所述第一界面的位置和所述每一个类型的界面元素在所述第二界面的位置确定所述N个界面元素的动画效果，包括：

所述电子设备根据第二界面切换参数确定所述N个界面元素的动画效果，其中所述第二界面切换参数包括以下中的至少一项：所述一个或多个界面元素的尺寸、所述每一个类型的界面元素的尺寸、所述第一位置集中的一个或多个位置与所述每一个类型的界面元素之间的距离、所述每一个类型的界面元素的限制参数、所述第一界面元素的动画效果。

11.根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：

所述电子设备根据相似度将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。

12.根据权利要求11所述的方法，其特征在于，所述相似度包括颜色相似度、尺寸相似度、形状相似度。

13.根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：

所述电子设备确定所述M个界面元素在所述第一界面的位置和所述N个界面元素在所述第二界面的位置；

所述电子设备根据所述M个界面元素在所述第一界面的位置和所述N个界面元素在所述第二界面的位置将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。

14.根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：

所述电子设备确定所述M个界面元素和所述N个界面元素的标签；

所述电子设备根据所述M个界面元素和所述N个界面元素的标签将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。

15.根据权利要求1至14中任一项所述的方法，其特征在于，所述N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。

16.根据权利要求1至15中任一项所述的方法，其特征在于，所述方法通过AAR格式文件、JAR格式文件或所述电子设备的***接口中的至少一项来实现。

17.根据权利要求1至16中任一项所述的方法，其特征在于，所述方法还包括：

若检测到所述电子设备的类型由第一类型变为第二类型，将所述第一联动切换效果切换为第二联动切换效果；

所述电子设备根据所述第一联动切换动画效果将所述第一界面切换至所述第二界面，包括：

所述电子设备根据所述第二联动切换动画效果将所述第一界面切换至所述第二界面。

18.一种电子设备，其特征在于，包括：用于实现如权利要求1至17中任一项所述的方法的模块。

19.一种电子设备，其特征在于，包括一个或多个处理器；一个或多个存储器；所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得如权利要求1至17中任一项所述的方法被执行。

20.一种芯片，其特征在于，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如权利要求1至17中任一项所述的方法被执行。

21.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机指令，当所述计算机指令在计算机上运行时，使得如权利要求1至17中任一项所述的方法被执行。

22.一种包含指令的计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1至17中任一项所述的方法。