CN117369914A - 显示方法及电子设备 - Google Patents

Abstract

本申请公开了一种显示方法及电子设备，在电子设备进行横竖屏切换或折叠屏展开/折叠的过程中，电子设备可以基于界面元素的布局参数来设置转场动画，并显示转场动画的动画效果，从而可以大幅提高系统的响应速度，并且每一个界面元素都可以设置有独立的动画效果，屏幕的背景色不会发生变化，平滑过渡，减少突兀感，提高用户体验。

Description

显示方法及电子设备

技术领域

本申请涉及终端技术领域，尤其涉及一种显示方法及电子设备。

背景技术

随着终端技术的快速发展，智能电子设备(例如手机)的功能也越来越强大，例如，智能电子设备可以为用户提供转场动画。然而，目前转场动画的使用场景较为受限，降低了用户体验。

发明内容

本申请实施例提供了一种显示方法及电子设备，电子设备可以基于界面元素的布局参数来设置转场动画，并显示转场动画的动画效果，平滑过渡，减少突兀感，提高用户体验。

第一方面，本申请实施例提供了一种显示方法，应用于包括显示屏的电子设备，该方法包括：在电子设备处于第一姿态的情况下，电子设备在显示屏上显示第一用户界面，第一用户界面中包括一个或多个界面元素；电子设备检测到第一事件，第一事件为用户触发将电子设备从第一姿态切换到第二姿态的事件；响应于第一事件，电子设备播放第一动画，第一动画是基于第一布局参数和第二布局参数生成的，第一动画中包括一个或多个子动画，一个或多个子动画为一个或多个界面元素中的部分或全部界面元素对应的动画；电子设备在显示屏上显示第二用户界面，第二用户界面为第一用户界面在电子设备处于第二姿态时的用户界面；其中，第一布局参数为一个或多个界面元素中的部分或全部界面元素显示于第一用户界面时的布局参数，第二布局参数为一个或多个界面元素中的部分或全部界面元素显示于第二用户界面时的布局参数。

通过实施第一方面提供的方法，电子设备可以为界面元素设置转场动画，并显示转场动画的动画效果，从而可以大幅提高系统的响应速度，并且每一个界面元素都可以设置有独立的动画效果，屏幕的背景色不会发生变化，平滑过渡，减少突兀感，提高用户体验。

在一种可能的实现方式中，第一姿态为竖屏姿态，第二姿态为横屏姿态；或，第一姿态为横屏姿态，第二姿态为竖屏姿态。

这样，电子设备在进行屏幕旋转时可以为界面元素设置转场动画，并显示转场动画的动画效果。

在一种可能的实现方式中，显示屏为折叠屏，第一姿态为展开姿态，第二姿态为折叠姿态或半折叠姿态；或，第一姿态为折叠姿态或半折叠姿态，第二姿态为展开姿态。

这样，电子设备在进行屏幕折叠或展开时可以为界面元素设置转场动画，并显示转场动画的动画效果。

在一种可能的实现方式中，在第一动画中包括多个子动画的情况下，多个子动画相同或不同。

这样，不同的界面元素对应的转场动画可以是相同的，也可以是不同的。

在一种可能的实现方式中，在电子设备播放第一动画之前，该方法还包括：电子设备获取第一布局参数和第二布局参数；电子设备基于第一布局参数和第二布局参数确定第一动画的信息，第一动画的信息用于电子设备播放第一动画。

这样，电子设备可以基于一个或多个界面元素中的部分或全部界面元素显示于第一用户界面时的布局参数、一个或多个界面元素中的部分或全部界面元素显示于第二用户界面时的布局参数来确定转场动画的信息，从而进一步可以播放该转场动画。

在一种可能的实现方式中，一个或多个界面元素包括第一界面元素，第一布局参数包括第一子布局参数，第一子布局参数为第一界面元素显示于第一用户界面时的布局参数，第二布局参数包括第二子布局参数，第二子布局参数为第一界面元素显示于第二用户界面时的布局参数，第一动画的信息包括一个或多个子动画的信息，一个或多个子动画的信息包括第一界面元素对应动画的信息，第一界面元素对应动画的信息是电子设备基于第一子布局参数和第二子布局参数确定的。

这样，电子设备可以基于每一个界面元素显示于第一用户界面和第二用户界面时的布局参数来确定其对应的转场动画的信息。

在一种可能的实现方式中，第一子布局参数包括第一界面元素在第一用户界面中的位置、大小中的一项或多项，第二子布局参数包括第一界面元素在第二用户界面中的位置、大小中的一项或多项。

在一种可能的实现方式中，电子设备确定第一界面元素对应动画的信息，具体包括：电子设备基于第一界面元素在第一用户界面和第二用户界面中的位置、大小中的一项或多项确定第一界面元素对应动画的信息；或，电子设备基于第一界面元素在第一用户界面和第二用户界面中的位置、大小中的一项或多项，以及第一界面元素在第一用户界面和第二用户界面中的角度来确定第一界面元素对应动画的信息。这样，电子设备可以基于每一个界面元素显示于第一用户界面和第二用户界面时的布局参数(例如位置、大小)来确定其对应的转场动画的信息；还可以基于每一个界面元素显示于第一用户界面和第二用户界面时的布局参数(例如位置、大小)、以及角度来确定其对应的转场动画的信息。

在一种可能的实现方式中，电子设备包括第一应用、过渡模块，第一用户界面为第一应用的一个用户界面，在电子设备获取第一布局参数和第二布局参数之前，该方法还包括：第一应用向过渡模块发送第一消息，第一消息用于指示过渡模块创建第一动画；电子设备获取第一布局参数和第二布局参数，具体包括：过渡模块获取第一布局参数和第二布局参数；电子设备基于第一布局参数和第二布局参数确定第一动画的信息，具体包括：过渡模块基于第一布局参数和第二布局参数确定第一动画的信息。

这样，在用户触发第一事件之后，第一应用可以指示过渡模块创建第一动画。

在一种可能的实现方式中，在第一应用向过渡模块发送第一消息之后，该方法还包括：第一应用向过渡模块发送第二消息，第二消息用于指示过渡模块通过显示屏播放第一动画。

这样，第一应用可以指示过渡模块触发显示屏显示第一动画的动画效果。

在一种可能的实现方式中，在第一应用向过渡模块发送第一消息之前，该方法还包括：第一应用获取第一事件的信息；第一应用基于第一事件的信息确定通过过渡模块生成第一动画。

这样，在用户触发第一事件之后，第一应用可以获取到第一事件的信息，并可以确定要通过过渡模块生成第一动画。

在一种可能的实现方式中，第一动画是第一应用通过调用动画接口生成的，动画接口是过渡模块提供的。

这样，第一应用可以通过调用过渡模块提供的动画接口来生成第一动画，从而实现界面元素在屏幕旋转、折叠屏展开/折叠场景下平滑过渡，减少突兀感。

在第一方面中，电子设备可以是电子设备100，在屏幕旋转场景下，第一姿态可以是竖屏姿态(或横屏姿态)，第二姿态可以是横屏姿态(或竖屏姿态)，在折叠屏展开/折叠场景下，第一姿态可以是展开姿态(或折叠姿态或半折叠姿态)，第二姿态可以是折叠姿态或半折叠姿态(或展开姿态)，第一用户界面可以是初始用户界面，第二用户界面可以是目的用户界面，第一事件可以是屏幕旋转事件或折叠屏展开/折叠事件，第一动画可以是动画1或动画1’，第一布局参数可以是图9中的布局参数1或图10中的布局参数1’，第二布局参数可以是图9中的布局参数2或图10中的布局参数2’，第一界面元素可以是一个或多个界面元素中的其中一个界面元素，第一应用可以是应用程序1，第一消息可以是图9中的消息2或图10中的消息2’，第二消息可以是图9中的消息3或图10中的消息3’，第一事件的信息可以是屏幕旋转事件的信息或折叠屏展开/折叠事件的信息。

第二方面，本申请实施例提供了一种电子设备，该电子设备包括一个或多个处理器和一个或多个存储器；其中，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行上述第一方面任一项可能的实现方式中所述的方法。

第三方面，本申请实施例提供了一种计算机存储介质，该计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，当所述程序指令在电子设备上运行时，使得所述电子设备执行上述第一方面任一项可能的实现方式中所述的方法。

第四方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述第一方面任一项可能的实现方式中所述的方法。

附图说明

图1A-图1C是本申请实施例提供的一组利用屏幕截图来实现横竖屏切换过程中的转场动画的用户界面示意图；

图1D是本申请实施例提供的一种开启电子设备“自动旋转”功能的用户界面示意图；

图2A-图2D是本申请实施例提供的一组在电子设备“由竖屏姿态向右旋转切换到横屏姿态”过程中涉及的用户界面示意图；

图3A-图3D是本申请实施例提供的一组在电子设备“由横屏姿态向左旋转切换到竖屏姿态”过程中涉及的用户界面示意图；

图4A-图4D是本申请实施例提供的一组在电子设备“由竖屏姿态向左旋转切换到横屏姿态”过程中涉及的用户界面示意图；

图5A-图5D是本申请实施例提供的一组在电子设备“由横屏姿态向右旋转切换到竖屏姿态”过程中涉及的用户界面示意图；

图6A-图6C是本申请实施例提供的一种具有外折折叠屏的电子设备的产品形态示意图；

图7A-图7D是本申请实施例提供的一组在电子设备进行折叠屏“展开”过程中涉及的用户界面示意图；

图8A-图8D是本申请实施例提供的一组在电子设备进行折叠屏“折叠”过程中涉及的用户界面示意图；

图9是本申请实施例提供的一种显示方法在横竖屏切换场景下的流程示意图；

图10是本申请实施例提供的一种显示方法在折叠屏展开/折叠场景下的流程示意图；

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

图12是本申请实施例提供的一种电子设备的软件架构示意图；

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

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；文本中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，另外，在本申请实施例的描述中，“多个”是指两个或多于两个。

应当理解，本申请的说明书和权利要求书及附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本申请所描述的实施例可以与其它实施例相结合。

本申请以下实施例中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面是通过java、可扩展标记语言(extensible markuplanguage，XML)等特定计算机语言编写的源代码，界面源代码在电子设备上经过解析，渲染，最终呈现为用户可以识别的内容。用户界面常用的表现形式是图形用户界面(graphicuser interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的文本、图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

随着终端技术的快速发展，智能电子设备(例如手机)的功能也越来越强大，例如，智能电子设备可以为用户提供转场动画。然而，目前转场动画的使用场景较为受限，降低了用户体验。

例如，在电子设备进行横竖屏切换场景下，当前的转场动画都是基于一个统一的转场框架，针对不同的横竖屏界面，进行横竖屏切换过程中的转场动画的动画效果比较单一，没有做到差异化的体验。

以安卓为例，目前安卓提供的横竖屏转场方案都是利用屏幕截图来实现的，即在原有的屏幕上面显示进行屏幕旋转之前的屏幕截图，之后，该屏幕截图在屏幕旋转的过程中渐渐消失，而屏幕旋转之后的界面再渐渐显示出来，从而达到转场的效果。

图1A-图1C示例性示出了电子设备100利用屏幕截图来实现横竖屏切换过程中的转场动画的一组用户界面。以电子设备100是手机为例来进行说明。

参阅图1A，电子设备100可以有四个边缘：边缘1(也可以称为顶部边缘)、边缘2(也可以称为底部边缘)、边缘3(也可以称为左侧边缘)、边缘4(也可以称为右侧边缘)。

在本申请实施例中，图1A所示的电子设备100的姿态可以称为电子设备100的一种竖屏姿态。

继续参阅图1A，以“图库”应用程序中的一个用户界面为例，可以看出，图1A示例性所示的用户界面110可以是电子设备100在竖屏姿态下“图库”应用程序中的一个用户界面。电子设备100可以检测到用户触发屏幕旋转事件(例如用户将电子设备100按照图1A所示的方向11a进行旋转的操作)，响应于该事件，电子设备100可以将图1A所示的用户界面进行屏幕截图，在电子设备100在进行旋转过程中，上述屏幕截图也会进行旋转并显示。

参阅图1B，图1B所示的电子设备100的姿态为电子设备100在由竖屏姿态开始进行旋转过程中的一个姿态，在电子设备100旋转到图1B所示的姿态的情况下，电子设备100可以显示用户界面120，该用户界面中可以包括：上述屏幕截图的一部分显示内容，电子设备100的屏幕四角处显示的背景色(例如黑色)。从图1B中可以看出，与图1A相比，电子设备100屏幕四角处显示的背景色发生了变化。

继续参阅图1B，在电子设备100按照图1B所示的方向11b继续进行旋转的情况下，电子设备100可以处于图1C所示的姿态。

在本申请实施例中，图1C所示的电子设备100的姿态可以称为电子设备100的一种横屏姿态。

继续参阅图1C，在电子设备100被旋转到横屏姿态的情况下，电子设备100可以显示示例性所示的用户界面130，容易理解，用户界面130为图1A所示的用户界面110在电子设备100处于横屏姿态下对应的用户界面。可以看出，用户界面110与用户界面130中的界面元素的布局发生了较大的变化。

从图1A-图1C可以看出，在电子设备100进行横竖屏切换过程中，电子设备100显示的屏幕背景色有所变化，而且，在系统完成屏幕截图之后才可以显示转场动画，响应时延较长，在进行横竖屏切换之后，用户界面中的界面元素的布局变化差异较大，变化过程较为突兀。

此外，当前的应用程序自身没有自定义转场动画的能力，应用程序还是需要依赖系统来进行屏幕截图，但是由于在进行横竖屏切换后，坐标系会发生变化，因此通过应用程序实现转场动画较为复杂。

此外，当前的共享元素(ShareElement)的转场动画只支持在两个活动(Activity)之间切换的情况，不能支持进行横竖屏切换、折叠屏展开/折叠等屏幕姿态或形态变化的情况。

为了解决上述问题，本申请实施例提供了一种显示方法，在电子设备100进行横竖屏切换或折叠屏展开/折叠的过程中，电子设备100可以基于界面元素的布局参数来设置转场动画，并显示转场动画的动画效果，可以大幅提高系统的响应速度，并且每一个界面元素都可以设置有独立的动画效果，屏幕的背景色不会发生变化，平滑过渡，减少突兀感，提高用户体验。

可以理解的是，在电子设备100利用屏幕截图来实现横竖屏转场(即图1A-图1C所示的横竖屏转场方案)之前，或，在电子设备100执行本申请实施例提供的显示方法之前，电子设备100上的“自动旋转”选项(例如图1D所示的选项141)需要处于打开状态(即开启电子设备100的“自动旋转”功能)，这样，电子设备100才会显示旋转过程中的转场动画以及旋转之后的用户界面。

在本申请实施例中，电子设备100也可以称为终端设备、用户设备(userequipment，UE)、接入终端、用户单元、用户站、移动站、移动台、远程终端、移动设备、用户终端、终端、无线通信设备、用户代理或用户装置。本申请的实施例中的电子设备100可以是具有触摸屏的手机(mobile phone)、平板电脑(Pad)、折叠屏形态的手持设备、虚拟现实(virtual reality，VR)终端设备、增强现实(augmented reality，AR)终端设备等等，在此不作限定。

下面先详细说明本申请实施例提供的显示方法在不同场景下实施时涉及的一系列用户界面。

一、横竖屏切换场景：

图2A-图2D、图3A-图3D、图4A-图4D、图5A-图5D示例性示出了本申请实施例提供的显示方法在电子设备100进行横竖屏切换过程中实施时涉及的一系列用户界面。

(1)图2A-图2D示例性示出了本申请实施例提供的显示方法在电子设备100“由竖屏姿态向右旋转切换到横屏姿态”过程中实施时涉及的一系列用户界面。

同样以“图库”应用程序中的一个用户界面为例，其中，图2A是电子设备100处于一种竖屏姿态时的一个用户界面示意图，图2B和图2C是电子设备100在“由图2A所示的竖屏姿态向右旋转切换到图2D所示的横屏姿态”这一过程中的任意两个用户界面示意图，图2D是电子设备100由图2A所示的竖屏姿态向右旋转切换到一种横屏姿态时的一个用户界面示意图。

参阅图2A，图2A所示的用户界面210可以是电子设备100在一种竖屏姿态下“图库”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，选项211、日期标识212(例如“2022年1月1日下午2:00”)、选项213、图片214、“分享”选项215、“收藏”选项216、“删除”选项217、“更多”选项218，等等。

继续参阅图2A，电子设备100可以检测到用户触发屏幕旋转事件(例如用户将电子设备100按照图2A所示的方向21a进行旋转的操作)，响应于该事件，电子设备100可以为用户界面210中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在“由图2A所示的竖屏姿态向右旋转切换到图2D所示的横屏姿态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从竖屏姿态时的布局效果平滑过渡到横屏姿态时的布局效果。

容易理解的是，图2B和图2C为电子设备100在“由图2A所示的竖屏姿态向右旋转切换到图2D所示的横屏姿态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图2B，图2B所示的用户界面220可以是用户将电子设备100按照图2A所示的方向21a进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图2A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图2B所示的用户界面中界面元素的布局效果与图2A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图2B所示的用户界面中界面元素的布局效果相比于图2A来说开始趋向于往图2D所示的用户界面中界面元素的布局效果进行过渡。

参阅图2C，图2C所示的用户界面230可以是用户将电子设备100按照图2B所示的方向21b继续进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图2B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图2C所示的用户界面中界面元素的布局效果与图2B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图2C所示的用户界面中界面元素的布局效果相比于图2B来说更进一步趋向于往图2D所示的用户界面中界面元素的布局效果进行过渡。

在本申请实施例中，界面元素的布局效果可以是基于界面元素的布局参数确定的，界面元素的布局参数可以包括但不限于界面元素在屏幕中显示的位置、大小、等参数信息。界面元素的布局效果还可以基于其他相关参数确定，例如在屏幕中显示的角度、颜色等参数信息。其中，上述布局参数和其他相关参数的信息均可以称为界面元素的属性信息。

参阅图2D，图2D所示的用户界面240可以是用户将电子设备100按照图2C所示的方向21c继续进行旋转后切换到一种横屏姿态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图2A所示的竖屏姿态向右旋转切换到图2D所示的横屏姿态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图2A所示的用户界面在电子设备100处于图2D所示的横屏姿态时对应的用户界面。可以看出，图2D所示的用户界面中界面元素的布局效果与图2A所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，选项211、日期标识212、选项213、图片214、“分享”选项215、“收藏”选项216、“删除”选项217、“更多”选项218的位置均发生了变化；又例如，图片214的大小也发生了变化(例如，相对于图2A来说变大或变小了)。

至此，电子设备100完成“由竖屏姿态向右旋转切换到横屏姿态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从竖屏姿态时的布局效果平滑过渡到横屏姿态时的布局效果，而且，切换全程屏幕背景色不会发生变化，减少了突兀感，用户的视觉效果更佳，此外，相比于依赖系统进行屏幕截图的转场方案来说，本方案无需等待系统进行屏幕截图，从而可以加快响应速度，支持0时延响应。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断的效果，也即是说，用户将电子设备100由竖屏姿态向右旋转但尚未切换到横屏姿态之前，在用户又将电子设备100向左旋转以返回到竖屏状态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由竖屏姿态向右旋转切换到横屏姿态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图2C所示的姿态时，用户又将电子设备100向左旋转以返回到图2A所示的竖屏状态，那么，电子设备100可以将从图2A到图2C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图2B所示的姿态时重新显示图2B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图2C所示姿态时的布局效果平滑过渡到图2A所示竖屏姿态时的布局效果。

(2)图3A-图3D示例性示出了本申请实施例提供的显示方法在电子设备100“由横屏姿态向左旋转切换到竖屏姿态”过程中实施时涉及的一系列用户界面。

同样以“图库”应用程序中的一个用户界面为例，其中，图3A是电子设备100处于一种横屏姿态时的一个用户界面示意图，图3B和图3C是电子设备100在“由图3A所示的横屏姿态向左旋转切换到图3D所示的竖屏姿态”这一过程中的任意两个用户界面示意图，图3D是电子设备100由图3A所示的横屏姿态向左旋转切换到一种竖屏姿态时的一个用户界面示意图。

参阅图3A，图3A所示的用户界面310可以是电子设备100在一种横屏姿态下“图库”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，选项311、日期标识312(例如“2022年1月1日下午2:00”)、选项313、图片314、“分享”选项315、“收藏”选项316、“删除”选项317、“更多”选项318，等等。

继续参阅图3A，电子设备100可以检测到用户触发屏幕旋转事件(例如用户将电子设备100按照图3A所示的方向31a进行旋转的操作)，响应于该事件，电子设备100可以为用户界面310中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在“由图3A所示的横屏姿态向左旋转切换到图3D所示的竖屏姿态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从横屏姿态时的布局效果平滑过渡到竖屏姿态时的布局效果。

容易理解的是，图3B和图3C为电子设备100在“由图3A所示的横屏姿态向左旋转切换到图3D所示的竖屏姿态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图3B，图3B所示的用户界面320可以是用户将电子设备100按照图3A所示的方向31a进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图3A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图3B所示的用户界面中界面元素的布局效果与图3A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图3B所示的用户界面中界面元素的布局效果相比于图3A来说开始趋向于往图3D所示的用户界面中界面元素的布局效果进行过渡。

参阅图3C，图3C所示的用户界面330可以是用户将电子设备100按照图3B所示的方向31b继续进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图3B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图3C所示的用户界面中界面元素的布局效果与图3B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图3C所示的用户界面中界面元素的布局效果相比于图3B来说更进一步趋向于往图3D所示的用户界面中界面元素的布局效果进行过渡。

参阅图3D，图3D所示的用户界面340可以是用户将电子设备100按照图3C所示的方向31c继续进行旋转后切换到一种竖屏姿态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图3A所示的横屏姿态向左旋转切换到图3D所示的竖屏姿态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图3A所示的用户界面在电子设备100处于图3D所示的竖屏姿态时对应的用户界面。可以看出，图3D所示的用户界面中界面元素的布局效果与图3A所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，选项311、日期标识312、选项313、图片314、“分享”选项315、“收藏”选项316、“删除”选项317、“更多”选项318的位置均发生了变化；又例如，图片314的大小也发生了变化(例如，相对于图3A来说变大或变小了)。

至此，电子设备100完成“由横屏姿态向左旋转切换到竖屏姿态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从横屏姿态时的布局效果平滑过渡到竖屏姿态时的布局效果，而且，切换全程屏幕背景色不会发生变化，减少了突兀感，用户的视觉效果更佳，此外，相比于依赖系统进行屏幕截图的转场方案来说，本方案无需等待系统进行屏幕截图，从而可以加快响应速度，支持0时延响应。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断的效果，也即是说，用户将电子设备100由横屏姿态向左旋转但尚未切换到竖屏姿态之前，在用户又将电子设备100向右旋转以返回到横屏状态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由横屏姿态向左旋转切换到竖屏姿态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图3C所示的姿态时，用户又将电子设备100向右旋转以返回到图3A所示的横屏状态，那么，电子设备100可以将从图3A到图3C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图3B所示的姿态时重新显示图3B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图3C所示姿态时的布局效果平滑过渡到图3A所示横屏姿态时的布局效果。

(3)图4A-图4D示例性示出了本申请实施例提供的显示方法在电子设备100“由竖屏姿态向左旋转切换到横屏姿态”过程中实施时涉及的一系列用户界面。

同样以“图库”应用程序中的一个用户界面为例，其中，图4A是电子设备100处于一种竖屏姿态时的一个用户界面示意图，图4B和图4C是电子设备100在“由图4A所示的竖屏姿态向左旋转切换到图4D所示的横屏姿态”这一过程中的任意两个用户界面示意图，图4D是电子设备100由图4A所示的竖屏姿态向左旋转切换到一种横屏姿态时的一个用户界面示意图。

参阅图4A，图4A所示的用户界面410可以是电子设备100在一种竖屏姿态下“图库”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，选项411、日期标识412(例如“2022年1月1日下午2:00”)、选项413、图片414、“分享”选项415、“收藏”选项416、“删除”选项417、“更多”选项418，等等。

继续参阅图4A，电子设备100可以检测到用户触发屏幕旋转事件(例如用户将电子设备100按照图4A所示的方向41a进行旋转的操作)，响应于该事件，电子设备100可以为用户界面410中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在“由图4A所示的竖屏姿态向左旋转切换到图4D所示的横屏姿态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从竖屏姿态时的布局效果平滑过渡到横屏姿态时的布局效果。

容易理解的是，图4B和图4C为电子设备100在“由图4A所示的竖屏姿态向左旋转切换到图4D所示的横屏姿态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图4B，图4B所示的用户界面420可以是用户将电子设备100按照图4A所示的方向41a进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图4A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图4B所示的用户界面中界面元素的布局效果与图4A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图4B所示的用户界面中界面元素的布局效果相比于图4A来说开始趋向于往图4D所示的用户界面中界面元素的布局效果进行过渡。

参阅图4C，图4C所示的用户界面430可以是用户将电子设备100按照图4B所示的方向41b继续进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图4B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图4C所示的用户界面中界面元素的布局效果与图4B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图4C所示的用户界面中界面元素的布局效果相比于图4B来说更进一步趋向于往图4D所示的用户界面中界面元素的布局效果进行过渡。

参阅图4D，图4D所示的用户界面440可以是用户将电子设备100按照图4C所示的方向41c继续进行旋转后切换到一种横屏姿态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图4A所示的竖屏姿态向左旋转切换到图4D所示的横屏姿态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图4A所示的用户界面在电子设备100处于图4D所示的横屏姿态时对应的用户界面。可以看出，图4D所示的用户界面中界面元素的布局效果与图4A所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，选项411、日期标识412、选项413、图片414、“分享”选项415、“收藏”选项416、“删除”选项417、“更多”选项418的位置均发生了变化；又例如，图片414的大小也发生了变化(例如，相对于图4A来说变大或变小了)。

至此，电子设备100完成“由竖屏姿态向左旋转切换到横屏姿态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从竖屏姿态时的布局效果平滑过渡到横屏姿态时的布局效果，而且，切换全程屏幕背景色不会发生变化，减少了突兀感，用户的视觉效果更佳，此外，相比于依赖系统进行屏幕截图的转场方案来说，本方案无需等待系统进行屏幕截图，从而可以加快响应速度，支持0时延响应。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断的效果，也即是说，用户将电子设备100由竖屏姿态向左旋转但尚未切换到横屏姿态之前，在用户又将电子设备100向右旋转以返回到竖屏状态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由竖屏姿态向左旋转切换到横屏姿态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图4C所示的姿态时，用户又将电子设备100向右旋转以返回到图4A所示的竖屏状态，那么，电子设备100可以将从图4A到图4C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图4B所示的姿态时重新显示图4B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图4C所示姿态时的布局效果平滑过渡到图4A所示竖屏姿态时的布局效果。

(4)图5A-图5D示例性示出了本申请实施例提供的显示方法在电子设备100“由横屏姿态向右旋转切换到竖屏姿态”过程中实施时涉及的一系列用户界面。

同样以“图库”应用程序中的一个用户界面为例，其中，图5A是电子设备100处于一种横屏姿态时的一个用户界面示意图，图5B和图5C是电子设备100在“由图5A所示的横屏姿态向右旋转切换到图5D所示的竖屏姿态”这一过程中的任意两个用户界面示意图，图5D是电子设备100由图5A所示的横屏姿态向右旋转切换到一种竖屏姿态时的一个用户界面示意图。

参阅图5A，图5A所示的用户界面510可以是电子设备100在一种横屏姿态下“图库”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，选项511、日期标识512(例如“2022年1月1日下午2:00”)、选项513、图片514、“分享”选项515、“收藏”选项516、“删除”选项517、“更多”选项518，等等。

继续参阅图5A，电子设备100可以检测到用户触发屏幕旋转事件(例如用户将电子设备100按照图5A所示的方向51a进行旋转的操作)，响应于该事件，电子设备100可以为用户界面510中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在“由图5A所示的横屏姿态向右旋转切换到图5D所示的竖屏姿态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从横屏姿态时的布局效果平滑过渡到竖屏姿态时的布局效果。

容易理解的是，图5B和图5C为电子设备100在“由图5A所示的横屏姿态向右旋转切换到图5D所示的竖屏姿态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图5B，图5B所示的用户界面520可以是用户将电子设备100按照图5A所示的方向51a进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图5A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图5B所示的用户界面中界面元素的布局效果与图5A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图5B所示的用户界面中界面元素的布局效果相比于图5A来说开始趋向于往图5D所示的用户界面中界面元素的布局效果进行过渡。

参阅图5C，图5C所示的用户界面530可以是用户将电子设备100按照图5B所示的方向51b继续进行旋转后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图5B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图5C所示的用户界面中界面元素的布局效果与图5B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图5C所示的用户界面中界面元素的布局效果相比于图5B来说进一步趋向于往图5D所示的用户界面中界面元素的布局效果进行过渡。

参阅图5D，图5D所示的用户界面540可以是用户将电子设备100按照图5C所示的方向51c继续进行旋转后切换到一种竖屏姿态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图5A所示的横屏姿态向右旋转切换到图5D所示的竖屏姿态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图5A所示的用户界面在电子设备100处于图5D所示的竖屏姿态时对应的用户界面。可以看出，图5D所示的用户界面中界面元素的布局效果与图5A所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，选项511、日期标识512、选项513、图片514、“分享”选项515、“收藏”选项516、“删除”选项517、“更多”选项518的位置均发生了变化；又例如，图片514的大小也发生了变化(例如，相对于图5A来说变大或变小了)。

至此，电子设备100完成“由横屏姿态向右旋转切换到竖屏姿态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从横屏姿态时的布局效果平滑过渡到竖屏姿态时的布局效果，而且，切换全程屏幕背景色不会发生变化，减少了突兀感，用户的视觉效果更佳，此外，相比于依赖系统进行屏幕截图的转场方案来说，本方案无需等待系统进行屏幕截图，从而可以加快响应速度，支持0时延响应。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断的效果，也即是说，用户将电子设备100由横屏姿态向右旋转但尚未切换到竖屏姿态之前，在用户又将电子设备100向左旋转以返回到横屏状态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由横屏姿态向右旋转切换到竖屏姿态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图5C所示的姿态时，用户又将电子设备100向左旋转以返回到图5A所示的横屏状态，那么，电子设备100可以将从图5A到图5C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图5B所示的姿态时重新显示图5B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图5C所示姿态时的布局效果平滑过渡到图5A所示横屏姿态时的布局效果。

从图2B-图2C、图3B-图3C、图4B-图4C、图5B-图5C中容易看出，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，相比于屏幕旋转之前，界面元素之间的一些相对参数(例如相对位置、相对角度等参数)也可能会发生变化，例如，图2C中界面元素之间的相对位置(例如图片214与其他界面元素之间的相对位置)相比于图2A来说发生了明显的变化。

需要说明的是，在本申请实施例中，“电子设备100检测到用户触发屏幕旋转事件”可以是指电子设备100通过传感器(例如陀螺仪)检测到电子设备100向左旋转的角度或向右旋转的角度达到某一个预设角度。此外，电子设备100的“竖屏姿态”可以是指电子设备100在图2A所示的姿态向左旋转或向右旋转某一个预设角度范围内所处的姿态；电子设备100的“横屏姿态”可以是指电子设备100在图3A或图5A所示的姿态向左旋转或向右旋转某一个预设角度范围内所处的姿态。

在一些实施例中，电子设备100也可以在用户结束屏幕旋转之后再开始显示转场动画的动画效果，显示完动画效果之后再显示结束屏幕旋转之后的用户界面，例如，在用户将电子设备由竖屏姿态旋转切换到横屏姿态的情况下，转场动画的动画效果可以在电子设备100切换到横屏姿态时再开始显示。

二、折叠屏展开/折叠场景：

图7A-图7D、图8A-图8D示例性示出了本申请实施例提供的显示方法在电子设备100进行折叠屏展开/折叠过程中实施时涉及的一系列用户界面。

在介绍本申请实施例提供的显示方法在电子设备100进行折叠屏展开/折叠过程中实施时涉及的一系列用户界面之前，先对电子设备100的折叠屏的形态进行介绍。

在本申请实施例中，电子设备100可以是具有折叠屏的电子设备，该折叠屏可折叠形成至少两个显示区域。例如，折叠屏可沿折叠边或折叠轴折叠形成第一屏和第二屏。

其中，电子设备100的折叠屏的折叠方式可以分为两类：一类为朝外翻折的折叠屏(简称外折折叠屏)，另一类为朝内翻折的折叠屏(简称内折折叠屏)。其中，以折叠屏可以折叠形成第一屏(也可以称为A屏)和第二屏(也可以称为B屏)为例。外折折叠屏被折叠后，第一屏的显示方向和第二屏的显示方向相背对。内折折叠屏被折叠后，第一屏的显示方向和第二屏的显示方向相对。第一屏和第二屏可以分别表示电子设备100的一个显示区域，也即是说，第一屏可以称为一个显示区域，第二屏可以称为另一个显示区域。

在本申请实施例中，电子设备100采用的折叠屏以外折折叠屏为例。

图6A-图6C示例性示出了本申请实施例提供的一种具有外折折叠屏的电子设备100的产品形态示意图。

参阅图6A，图6A是电子设备100的外折折叠屏完全展开时的形态示意图，该外折折叠屏可沿折叠边，按照图6A所示的方向61a和61b翻折，从而可形成图6B所示的半折叠形态的两个显示区域：A屏和B屏。

参阅图6B，该外折折叠屏可沿折叠边，按照图6B所示的方向62a和62b继续翻折，从而可形成图6C所示的完全折叠形态的外折折叠屏。

参阅图6C，电子设备100的外折折叠屏被完全折叠后，A屏和B屏相背对。

需要说明的是，本申请实施例中的折叠屏(包括内折折叠屏和外折折叠屏)被折叠后形成的至少两个屏，可以为独立存在的多个屏，也可以为一体结构的一个完整屏，只是被折叠形成了至少两部分。

例如，折叠屏可以是柔性折叠屏，柔性折叠屏包括采用柔性材质制作的折叠边。该柔性折叠屏的部分或全部采用柔性材质制作。柔性折叠屏被折叠后形成的至少两个显示区域是一体结构的一个完整屏，只是被折叠形成了至少两部分。

其中，图6A-图6C中是以折叠屏是柔性折叠屏为例对本申请实施例中的电子设备100的折叠屏进行说明的。

又例如，上述折叠屏可以为多屏折叠屏。该多屏折叠屏可包括多个(两个或两个以上)单独的屏。上述多个显示区域是多个单独的显示屏。这多个屏可依次通过折叠轴连接。每个屏可以绕与其连接的折叠轴转动，实现多屏折叠屏的折叠。

容易理解，电子设备100的折叠屏(包括外折折叠屏)的A屏和B屏之间的夹角α的取值范围为[0°，180°]，其中，如果α∈[0°，P1]，电子设备100可以确定折叠屏处于完全折叠形态(或称折叠形态/折叠姿态)；如果α∈(P1，P2)，电子设备100可以确定折叠屏处于半折叠形态(或称半折叠姿态)；如果α∈[P2，180°]，电子设备100可以确定折叠屏处于完全展开形态(或称展开形态/展开姿态)。其中，0°＜P1＜P2＜180°，P1，P2可以是电子设备100的预设角度阈值，P1和P2可以是根据大量用户使用折叠屏的使用习惯确定的；或者，P1和P2可以由用户在电子设备100中自主设定。

(1)图7A-图7D示例性示出了本申请实施例提供的显示方法在电子设备100进行折叠屏“展开”过程中实施时涉及的一系列用户界面。

以“桌面”应用程序中的一个用户界面为例，其中，图7A是电子设备100处于一种完全折叠形态时的一个用户界面示意图，图7B和图7C是电子设备100在折叠屏“由完全折叠形态切换到完全展开形态”这一过程中处于半折叠形态时的任意两个用户界面示意图，图7D是电子设备100处于一种完全展开形态时的一个用户界面示意图。

参阅图7A，图7A所示的用户界面710(即完全显示在A屏上的用户界面)可以是电子设备100在处于一种完全折叠形态时“桌面”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，日历指示符711、卡片712、卡片713、页面指示符714、一个或多个应用程序的图标(例如“运动健康”应用程序的图标、“天气”应用程序的图标、“相机”应用程序的图标、“通讯录”应用程序的图标、“电话”应用程序的图标、“信息”应用程序的图标等)，等等。

继续参阅图7A，电子设备100可以检测到用户触发折叠屏展开事件(例如用户将电子设备100的折叠屏沿折叠边按照图7A所示的方向71a和71b进行翻折的操作)，响应于该事件，电子设备100可以为用户界面710中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在折叠屏“由图7A所示的完全折叠形态切换到图7D所示的完全展开形态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从完全折叠形态时的布局效果平滑过渡到完全展开形态时的布局效果。

容易理解的是，图7B和图7C为电子设备100在“由图7A所示的完全折叠形态切换到图7D所示的完全展开形态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图7B，图7B所示的用户界面720(绝大部分显示在A屏、极少部分显示在B屏的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图7A所示的方向71a和71b进行翻折后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图7A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图7B所示的用户界面中界面元素的布局效果与图7A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图7B所示的用户界面中界面元素的布局效果相比于图8A来说开始趋向于往图7D所示的用户界面中界面元素的布局效果进行过渡。

参阅图7C，图7C所示的用户界面730(大部分显示在A屏、少部分显示在B屏的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图7B所示的方向72a和72b继续进行翻折后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图7B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图7C所示的用户界面中界面元素的布局效果与图7B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图7C所示的用户界面中界面元素的布局效果相比于图7B来说进一步趋向于往图7D所示的用户界面中界面元素的布局效果进行过渡。

参阅图7D，图7D所示的用户界面740(一半显示在A屏、一半显示在B屏的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图7C所示的方向73a和73b继续进行翻折后切换到一种完全展开形态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图7A所示的完全折叠形态切换到图7D所示的完全展开形态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图7A所示的用户界面在电子设备100处于图7D所示的完全展开形态时对应的用户界面。可以看出，图7A所示的用户界面中界面元素的布局效果与图7D所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，日历指示符711、卡片712、卡片713、页面指示符714、一个或多个应用程序的图标(例如“运动健康”应用程序的图标、“天气”应用程序的图标、“相机”应用程序的图标、“通讯录”应用程序的图标、“电话”应用程序的图标、“信息”应用程序的图标等)的位置均发生了变化；又例如，卡片712、卡片713的大小也发生了变化(例如，相对于图7A来说变大了)。

至此，电子设备100完成折叠屏“由完全折叠形态切换到完全展开形态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从完全折叠形态时的布局效果平滑过渡到完全展开形态时的布局效果，在折叠屏展开过程中每一个界面元素都可以独立做变化，达到了元素级的折叠屏转场的效果，提高用户的视觉体验。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断，也即是说，用户将电子设备100的折叠屏由完全折叠形态进行翻折但尚未切换到完全展开形态之前，在用户又将电子设备100的折叠屏进行反向翻折以返回到完全折叠形态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由完全折叠形态切换到完全展开形态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图7C所示的半折叠形态时，用户又将电子设备100的折叠屏反向折叠以返回到图7A所示的完全折叠形态，那么，电子设备100可以将从图7A到图7C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图7B所示的半折叠形态时重新显示图7B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图7C所示半折叠形态时的布局效果平滑过渡到图7A所示完全折叠形态时的布局效果。

(2)图8A-图8D示例性示出了本申请实施例提供的显示方法在电子设备100进行折叠屏“折叠”过程中实施时涉及的一系列用户界面。

同样以“桌面”应用程序中的一个用户界面为例，其中，图8A是电子设备100处于一种完全展开形态时的一个用户界面示意图，图8B和图8C是电子设备100在折叠屏“由完全展开形态切换到完全折叠形态”这一过程中处于半折叠形态时的任意两个用户界面示意图，图8D是电子设备100处于一种完全折叠形态时的一个用户界面示意图。

参阅图8A，图8A所示的用户界面810(即一半显示在A屏、一半显示在B屏的用户界面)可以是电子设备100在处于一种完全展开形态时“桌面”应用程序中的一个用户界面，该用户界面中可以包括一个或多个界面元素，例如，日历指示符811、卡片812、卡片813、页面指示符814、一个或多个应用程序的图标(例如“运动健康”应用程序的图标、“天气”应用程序的图标、“相机”应用程序的图标、“通讯录”应用程序的图标、“电话”应用程序的图标、“信息”应用程序的图标等)，等等。

继续参阅图8A，电子设备100可以检测到用户触发折叠屏折叠事件(例如用户将电子设备100的折叠屏沿折叠边按照图8A所示的方向81a和81b进行翻折的操作)，响应于该事件，电子设备100可以为用户界面810中每一个界面元素创建独立的转场动画，创建完成后，电子设备100可以在折叠屏“由图8A所示的完全展开形态切换到图8D所示的完全折叠形态”这一过程中显示创建完成的转场动画的动画效果，从而实现用户界面中界面元素的布局效果逐渐从完全展开形态时的布局效果平滑过渡到完全折叠形态时的布局效果。

容易理解的是，图8B和图8C为电子设备100在“由图8A所示的完全展开形态切换到图8D所示的完全折叠形态”这一过程中多帧转场动画中的任意两帧转场动画对应的用户界面示意图。

参阅图8B，图8B所示的用户界面820(绝大部分显示在A屏、极少部分显示在B屏的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图8A所示的方向81a和81b进行翻折后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图8A所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图8B所示的用户界面中界面元素的布局效果与图8A所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图8B所示的用户界面中界面元素的布局效果相比于图8A来说开始趋向于往图8D所示的用户界面中界面元素的布局效果进行过渡。

参阅图8C，图8C所示的用户界面830(大部分显示在A屏、少部分显示在B屏的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图8B所示的方向82a和82b继续进行翻折后的其中一个用户界面。可以看出，该用户界面中包括的界面元素和图8B所示的用户界面中包括的界面元素是一样的，但是，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，图8C所示的用户界面中界面元素的布局效果与图8B所示的用户界面中界面元素的布局效果相比发生了变化，容易看出，图8C所示的用户界面中界面元素的布局效果相比于图8B来说进一步趋向于往图8D所示的用户界面中界面元素的布局效果进行过渡。

参阅图8D，图8D所示的用户界面840(完全显示在A屏上的用户界面)可以是用户将电子设备100的折叠屏沿折叠边按照图8C所示的方向83a和83b继续进行翻折后切换到一种完全折叠形态时的一个用户界面。容易理解，该用户界面是电子设备100在完成显示“由图8A所示的完全展开形态切换到图8D所示的完全折叠形态”这一过程中的转场动画的动画效果之后显示的一个用户界面，该用户界面是图8A所示的用户界面在电子设备100处于图8D所示的完全折叠形态时对应的用户界面。可以看出，图8D所示的用户界面中界面元素的布局效果与图8A所示的用户界面中界面元素的布局效果相比发生了较为明显的变化，也即是说，界面元素的布局参数(例如位置、大小等布局参数)发生了较为明显的变化，例如，日历指示符811、卡片812、卡片813、页面指示符814、一个或多个应用程序的图标(例如“运动健康”应用程序的图标、“天气”应用程序的图标、“相机”应用程序的图标、“通讯录”应用程序的图标、“电话”应用程序的图标、“信息”应用程序的图标等)的位置均发生了变化；又例如，卡片812、卡片813的大小也发生了变化(例如，相对于图8A来说变小了)。

至此，电子设备100完成折叠屏“由完全展开形态切换到完全折叠形态”，电子设备100显示的用户界面中界面元素的布局效果也通过界面元素的转场动画实现了逐渐从完全展开形态时的布局效果平滑过渡到完全折叠形态时的布局效果，在折叠屏展开过程中每一个界面元素都可以独立做变化，达到了元素级的折叠屏转场的效果，提高用户的视觉体验。

在本申请实施例中，电子设备100还可以支持转场动画的动画效果可打断，也即是说，用户将电子设备100的折叠屏由完全展开形态进行翻折但尚未切换到完全折叠形态之前，在用户又将电子设备100的折叠屏进行反向翻折以返回到完全展开形态的情况下，电子设备100也可以显示每一个界面元素的转场动画的动画效果，容易理解，该转场动画的动画效果的显示过程是前述由完全展开形态切换到完全折叠形态时转场动画的动画效果的逆向显示过程。例如，在电子设备100处于图8C所示的半折叠形态时，用户又将电子设备100的折叠屏反向折叠以返回到图8A所示的完全折叠形态，那么，电子设备100可以将从图8A到图8C之间的多帧转场动画的动画效果进行逆向显示(例如在电子设备100重新旋转到图8B所示的半折叠形态时重新显示图8B所示的转场动画对应的用户界面)，从而实现用户界面中界面元素的布局效果逐渐从图8C所示半折叠形态时的布局效果平滑过渡到图8A所示完全展开形态时的布局效果。

从图7B-图7C、图8B-图8C中容易看出，由于电子设备100为每一个界面元素都创建了独立的转场动画，因此，相比于折叠屏完全展开/完全折叠之前，界面元素之间的一些相对参数(例如相对距离、相对角度等参数)也可能会发生变化，例如，图7C中界面元素之间的相对距离(例如“通讯录”应用程序与“电话”应用程序之间的相对距离)相比于图2A来说发生了明显的变化。

在本申请实施例中，“电子设备100显示转场动画的动画效果”可以称为“电子设备100播放转场动画”，容易理解，电子设备100是在由“开始进行屏幕旋转或折叠或展开时显示的用户界面”切换到“结束屏幕旋转或折叠或展开之后最终显示的用户界面”过程中播放转场动画的。

在本申请实施例中，电子设备100为每一个界面元素创建独立的转场动画之后，每一个界面元素就都会有对应自己的转场动画，在显示转场动画的动画效果过程中，每一个界面元素对应的转场动画的动画效果都可以独立进行显示，互相之间不会有干扰。此外，界面元素之间启动转场动画的时间可以相同，也可以不同，也即是说，一个界面元素可以与另一个界面元素同时启动转场动画，也可以早于或晚于另一个界面元素启动转场动画。

需要说明的是，每一个界面元素对应的转场动画的动画效果可以相同，也可以不同，本申请实施例对此不作限定。

在一些实施例中，电子设备100也可以只为部分界面元素(例如用户比较关注的界面元素)创建转场动画。

在本申请实施例中，动画(animation)可以作用于动画对象，动画对象可以是应用程序提供的用户界面中包括的一个或多个界面元素。

在本申请实施例中，动画可以包括但不限于以下四种：基于外观的动画、基于位置的动画、基于变换的动画、基于内容的动画。其中，基于外观的动画可以包括：透明度、圆角、边界颜色、边界线宽、背景颜色、阴影等；基于位置的动画可以包括：宽/高配置、x/y/z坐标、x/y/z锚点等；基于变换的动画可以包括：平移、旋转、缩放、3D变换等；基于内容的动画可以包括：滤镜效果如模糊、色彩增强、灰度变化、增加杂色等。

结合上述在横竖屏切换场景、折叠屏展开/折叠场景下的一系列用户界面，下面详细介绍本申请实施例提供的显示方法在横竖屏切换场景、折叠屏展开/折叠场景下可能的实现方式的具体流程。

一、横竖屏切换场景：

下面介绍本申请实施例提供的显示方法在横竖屏切换场景下的具体执行过程。

图9示例性示出了本申请实施例提供的显示方法在横竖屏切换场景下的具体流程。

如图9所示，该方法可以应用于电子设备100(例如手机)，其中，电子设备100可以包括窗口管理服务模块(WindowsManagerService,WMS)、应用程序1(APP1)、过渡(Transition)模块、显示模块。下面详细介绍该方法的具体步骤：

在本申请实施例中，用户在触发屏幕旋转事件之前，电子设备100上显示的用户界面可以称为初始用户界面，用户在触发屏幕旋转事件之后(即屏幕旋转事件结束之后)，电子设备100上最终显示的用户界面可以称为目的用户界面。

下面结合阶段一(步骤S901-步骤S904)来介绍电子设备100显示初始用户界面的一种可能的内部实现方式：

阶段一：显示初始用户界面(即屏幕旋转之前显示的用户界面)

S901-S902、电子设备100的应用程序1向窗口管理服务模块发送界面元素的信息1，窗口管理服务模块可以基于界面元素的信息1和屏幕的信息确定用户界面1(即初始用户界面)的信息，该信息中包括用户界面1中的界面元素的布局参数。

其中，上述应用程序1可以是电子设备100上的系统应用，也可以是第三方应用，本申请实施例对此不作限定。

电子设备100在检测到用户想要打开应用程序1的某一个用户界面(例如用户界面1)的情况下，电子设备100的应用程序1可以向窗口管理服务模块发送界面元素的信息1。

其中，界面元素的信息1可以为用户界面1中包括的一个或多个界面元素的信息，界面元素的信息1可以包括上述一个或多个界面元素的绘制信息(例如界面元素的位置、大小、角度、颜色等信息)、标识信息(例如界面元素的ID)等。

进一步地，窗口管理模块可以基于界面元素的信息1和屏幕的信息(例如屏幕的尺寸信息、方向信息等)来确定用户界面1(即初始用户界面)的信息。

其中，用户界面1的信息可以为用于描述用户界面1的相关信息，例如，该信息中可以包括用户界面1中包括的一个或多个界面元素的布局参数(例如界面元素在屏幕中显示的位置、大小等参数信息)，还可以包括用户界面1中包括的一个或多个界面元素的其他参数(例如角度、颜色等参数信息)。

在一些实施例中，窗口管理服务模块可以保存用户界面1的信息。

S903-S904、电子设备100的窗口管理服务模块向显示模块发送用户界面1的信息，显示模块可以基于用户界面1的信息显示用户界面1。

以应用程序1是“图库”应用程序为例，容易理解，在电子设备100处于竖屏姿态的情况下，显示模块显示的用户界面1可以为图2A或图4A所示的用户界面；在电子设备100处于横屏姿态的情况下，显示模块显示的用户界面1可以为图3A或图5A所示的用户界面。

下面结合阶段二(步骤S905-步骤S915)来介绍电子设备100触发屏幕旋转事件、创建动画并显示动画效果的一种可能的内部实现方式：

阶段二：触发屏幕旋转事件、创建动画并显示动画效果

S905-S906、电子设备100的窗口管理服务模块检测到用户触发屏幕旋转事件，响应于该事件，电子设备100的窗口管理服务模块可以向应用程序1发送消息1，该消息中包括屏幕旋转事件的信息。

其中，上述步骤S905-步骤S906可以是电子设备100在显示上述初始用户界面的情况下执行。

其中，上述屏幕旋转事件可以包括：由竖屏姿态向右旋转切换到横屏姿态、由横屏姿态向左旋转切换到竖屏姿态、由竖屏姿态向左旋转切换到横屏姿态、由横屏姿态向右旋转切换到竖屏姿态。

其中，窗口管理服务模块可以是通过调用onConfigurationChanged这一方法来向应用程序1发送上述消息1的。

其中，上述屏幕旋转事件的信息可以包括：横竖屏切换(例如由横屏姿态切换到竖屏姿态、由竖屏姿态切换到横屏姿态)的信息、屏幕旋转的方向信息(例如向右旋转、向左旋转)等。

S907、电子设备100的应用程序1基于屏幕旋转事件的信息确定需要更新界面元素的信息，并确定需要创建动画1。

具体地，应用程序1在接收到窗口管理服务模块发送的上述消息1之后，可以基于上述消息1中包括的屏幕旋转事件的信息确定需要更新界面元素的信息，也即是说，在确定触发屏幕旋转事件之后，应用程序1需要向窗口管理模块更新界面元素的信息，以便电子设备100可以基于更新后的界面元素的信息来显示屏幕旋转之后的用户界面。

同时，应用程序1还可以确定需要创建动画1，其中，动画1可以是从屏幕旋转之前的用户界面切换到屏幕旋转之后的用户界面过程中的转场动画(也可以称为过渡动画)。

S908、电子设备100的应用程序1向窗口管理服务模块发送界面元素的信息2。

具体地，电子设备100的应用程序1在基于屏幕旋转事件的信息确定需要更新界面元素的信息之后，可以向窗口管理服务模块发送界面元素的信息2。

其中，界面元素的信息2可以为屏幕旋转之后的用户界面(即目的用户界面，例如下述用户界面2)中包括的一个或多个界面元素的信息，界面元素的信息2可以包括上述一个或多个界面元素的绘制信息(例如界面元素的位置、大小、角度、颜色等信息)、标识信息(例如界面元素的ID)等。

S909、电子设备100的应用程序1向过渡模块发送消息2，该消息用于指示过渡模块创建动画1。

具体地，电子设备100的应用程序1在基于屏幕旋转事件的信息确定需要更新界面元素的信息之后，可以向过渡模块发送上述消息2。

在一些实施例中，应用程序1可以通过过渡模块中提供的一些接口(例如createViewGroupTransition)来在过渡模块中创建一个对象，过渡模块可以在该对象中添加创建好的动画1。

需要说明的是，本申请实施例对执行上述步骤S908与上述步骤S909的时间顺序不作限定，例如，上述步骤S908与上述步骤S909可以同时执行；又例如，上述步骤S908可以先于上述步骤S909执行；再例如，上述步骤S908可以后于上述步骤S909执行。

S910、电子设备100的窗口管理服务模块基于界面元素的信息2和屏幕的信息确定用户界面2(即目的用户界面)的信息，该信息中包括用户界面2中的界面元素的布局参数。

具体地，在接收到应用程序1发送的界面元素的信息2之后，电子设备100的窗口管理服务模块可以基于界面元素的信息2和屏幕的信息(例如屏幕的尺寸信息、方向信息等)来确定用户界面2(即目的用户界面)的信息。

其中，用户界面2的信息可以为用于描述用户界面2的相关信息，例如，该信息中可以包括用户界面2中包括的一个或多个界面元素的布局参数(例如界面元素在屏幕中显示的位置、大小等参数信息)，还可以包括用户界面2中包括的一个或多个界面元素的其他参数(例如角度、颜色等参数信息)。

在一些实施例中，窗口管理服务模块可以保存用户界面2的信息。

S911-S912、电子设备100的过渡模块获取布局参数1和布局参数2，其中，布局参数1为用户界面1中的界面元素的布局参数，布局参数2为用户界面2中的界面元素的布局参数。之后，电子设备100的过渡模块可以基于布局参数1和布局参数2确定动画1的信息。

具体地，电子设备100的过渡模块在确定需要创建动画(CreateAnimator)的情况下，可以分别获取布局参数1和布局参数2，其中，布局参数1可以为屏幕旋转之前的用户界面(例如上述用户界面1)中包括的一个或多个界面元素的布局参数，布局参数2可以为屏幕旋转之后的用户界面(例如上述用户界面2)中包括的一个或多个界面元素的布局参数。

其中，过渡模块可以通过调用captureStartValues这一方法来获取布局参数1，例如，布局参数1可以是过渡模块从电子设备100的系统服务模块中(例如窗口管理服务模块中)获取到的。

其中，过渡模块可以通过调用captureEndValues这一方法来获取布局参数2，例如，布局参数2可以是过渡模块从电子设备100的系统服务模块中(例如窗口管理服务模块中)获取到的。

进一步地，在获取到布局参数1和布局参数2之后，过渡模块可以基于布局参数1和布局参数2来确定动画1的信息，从而完成创建动画1。这样，可以使得动画效果显示过程中界面元素的布局效果逐渐由布局参数1对应的布局效果平滑过渡到布局参数2对应的布局效果，提高用户的视觉体验。

其中，动画1的信息中可以包括实现该动画1的动画效果的内部逻辑信息，例如，动画效果持续时间内的每一帧动画对应的用户界面中包括的一个或多个界面元素的布局参数，或，动画效果持续时间内的每一帧动画对应的用户界面中包括的一个或多个界面元素的布局参数相对于布局参数1的修改量，等等。

在本申请实施例中，上述动画1的信息也可以是电子设备100基于布局参数1、布局参数2、一个或多个动画接口(即用于配置动画信息的函数、方法)来确定的，这一个或多个动画接口可以是过渡模块提供的，这一个或多个动画接口可以被应用程序1调用，不同的动画接口可以创建不同动画效果的动画，应用程序1可以根据需求调用。

在一些实施例中，过渡模块也可以不用获取布局参数2，而是只基于布局参数1来确定动画1的信息。

在一些实施例中，过渡模块还可以基于布局参数1、布局参数2、和/或其他参数(例如角度)来确定动画1的信息。

容易理解，上述动画1可以包括一个或多个子动画，这一个或多个子动画为上述一个或多个界面元素的部分或全部界面元素对应的动画。一个子动画即为一个界面元素对应的动画，该子动画的信息可以是基于该界面元素的布局参数(也可以称为子布局参数，即每一个界面元素的布局参数)和/或其他参数(例如角度)来确定的。在这一个或多个子动画为上述一个或多个界面元素的部分界面元素对应的动画的情况下，上述布局参数1和布局参数2可以为上述一个或多个界面元素的部分界面元素对应的布局参数；在这一个或多个子动画为上述一个或多个界面元素的全部界面元素对应的动画的情况下，上述布局参数1和布局参数2可以为上述一个或多个界面元素的全部界面元素对应的布局参数。

在一些实施例中，上述动画1也可以是应用程序1自定义生成的，这样，过渡模块就不需要再重新创建动画，应用程序1可以把动画1的信息发送给过渡模块，从而可以进一步来触发动画1的动画效果。

S913、电子设备100的应用程序1向过渡模块发送消息3，该消息用于指示过渡模块触发动画1的动画效果。

其中，应用程序1可以是通过调用触发动画效果的方法(例如viewGroupTransition.go这一方法)来向过渡模块发送上述消息3，以指示过渡模块触发动画1的动画效果。

其中，上述步骤S913可以是在步骤S909执行完之后就执行，也可以是与步骤S911或步骤S912同时执行，也可以是先于步骤S912执行，本申请实施例对此不作限定。

S914、电子设备100的过渡模块向显示模块发送消息4，该消息中包括动画1的信息。

具体地，电子设备100的过渡模块在确定出动画1的信息之后，可以向显示模块发送消息4，该消息中可以包括动画1的信息。

S915、电子设备100的显示模块基于动画1的信息显示动画1的动画效果。

具体地，电子设备100的显示模块在接收到过渡模块发送的上述消息4之后，可以基于上述消息4中的动画1的信息显示动画1的动画效果。

其中，显示动画1的动画效果的过程可以是指电子设备100在屏幕上显示动画1中包括的每一帧动画所对应的用户界面的过程。

举例来说，在横竖屏切换场景下，上述动画1对应的用户界面可以有以下几种：

(1)在“由竖屏姿态向右旋转切换到横屏姿态”的情况下，上述动画1对应的用户界面可以是“由图2A所示的竖屏姿态向右旋转切换到图2D所示的横屏姿态”这一过程中多帧转场动画对应的用户界面(例如可以包括图2B和图2C所示的用户界面)。

(2)在“由横屏姿态向左旋转切换到竖屏姿态”的情况下，上述动画1对应的用户界面可以是“由图3A所示的横屏姿态向左旋转切换到图3D所示的竖屏姿态”这一过程中多帧转场动画对应的用户界面(例如可以包括图3B和图3C所示的用户界面)。

(3)在“由竖屏姿态向左旋转切换到横屏姿态”的情况下，上述动画1对应的用户界面可以是“由图4A所示的竖屏姿态向左旋转切换到图4D所示的横屏姿态”这一过程中多帧转场动画对应的用户界面(例如可以包括图4B和图4C所示的用户界面)。

(4)在“由横屏姿态向右旋转切换到竖屏姿态”的情况下，上述动画1对应的用户界面可以是“由图5A所示的横屏姿态向右旋转切换到图5D所示的竖屏姿态”这一过程中多帧转场动画对应的用户界面(例如可以包括图5B和图5C所示的用户界面)。

下面结合阶段三(步骤S916-步骤S917)来介绍电子设备100显示目的用户界面的一种可能的内部实现方式：

阶段三：显示目的用户界面(即屏幕旋转之后最终显示的用户界面)

S916-S917、电子设备100的窗口管理服务模块向显示模块发送用户界面2的信息，显示模块可以基于用户界面2的信息显示用户界面2。

其中，步骤S916可以是步骤S915完成之后执行，也可以是在步骤S910之后就执行，本申请实施例对此不作限定。

显示模块在显示完成动画1的动画效果之后，可以基于用户界面2的信息显示用户界面2。

同样以应用程序1是“图库”应用程序为例，容易理解，在电子设备100的屏幕被旋转到竖屏姿态的情况下，显示模块显示的用户界面2可以为图3D或图5D所示的用户界面；在电子设备100被旋转到横屏姿态的情况下，显示模块显示的用户界面2可以为图2D或图4D所示的用户界面。

通过实施上述图9所示的方法，在电子设备100进行横竖屏切换的过程中，电子设备100可以提供基于用户界面中包括的一个或多个界面元素的布局参数来设置转场动画的能力，减小系统的响应时延，并且可以支持应用程序或系统自主定制转场动画，其中，应用程序可以通过电子设备100提供的调用接口来实现自主定制的转场动画，接入较为自由，由于每一个界面元素都可以被感知，因此可以支持自主定制元素级的转场动画。而且，应用程序可以监听动画效果的显示过程，因此，电子设备100还可以支持转场动画的动画效果可打断的效果。此外，在横竖屏切换全程屏幕背景色不会发生变化，减少了突兀感，用户的视觉体验更佳。

二、折叠屏展开/折叠场景：

下面介绍本申请实施例提供的显示方法在折叠屏展开/折叠场景下的具体执行过程。

图10示例性示出了本申请实施例提供的显示方法在折叠屏展开/折叠场景下的具体流程。

如图10所示，该方法可以应用于具有折叠屏的电子设备100(例如手机)，其中，电子设备100可以包括：窗口管理服务模块(WindowsManagerService,WMS)、应用程序1(APP1)、过渡(Transition)模块、显示模块。下面详细介绍该方法的具体步骤：

在本申请实施例中，用户在触发折叠屏展开/折叠事件之前，电子设备100上显示的用户界面可以称为初始用户界面，用户在触发折叠屏展开/折叠事件之后(即折叠屏展开/折叠事件结束之后)，电子设备100上最终显示的用户界面可以称为目的用户界面。

下面结合阶段一(步骤S1001-步骤S1004)来介绍电子设备100显示初始用户界面的一种可能的内部实现方式：

阶段一：显示初始用户界面(即折叠屏展开/折叠之前显示的用户界面)

S1001-S1002、电子设备100的应用程序1向窗口管理服务模块发送界面元素的信息1’，窗口管理服务模块可以基于界面元素的信息1’和折叠屏的信息确定用户界面1’(即初始用户界面)的信息，该信息中包括用户界面1’中的界面元素的布局参数。

其中，上述应用程序1可以是电子设备100上的系统应用，也可以是第三方应用，本申请实施例对此不作限定。

电子设备100在检测到用户想要打开应用程序1的某一个用户界面(例如用户界面1’)的情况下，电子设备100的应用程序1可以向窗口管理服务模块发送界面元素的信息1’。

其中，界面元素的信息1’可以为用户界面1’中包括的一个或多个界面元素的信息，界面元素的信息1’可以包括上述一个或多个界面元素的绘制信息(例如界面元素的位置、大小、角度、颜色等信息)、标识信息(例如界面元素的ID)等。

进一步地，窗口管理模块可以基于界面元素的信息1’和折叠屏的信息(例如折叠屏的尺寸信息、形态信息等)来确定用户界面1’(即初始用户界面)的信息。

其中，用户界面1’的信息可以为用于描述用户界面1’的相关信息，例如，该信息中可以包括用户界面1’中包括的一个或多个界面元素的布局参数(例如界面元素在折叠屏中显示的位置、大小等参数信息)，还可以包括用户界面1’中包括的一个或多个界面元素的其他参数(例如角度、颜色等参数信息)。

在一些实施例中，窗口管理服务模块可以保存用户界面1’的信息。

S1003-S1004、电子设备100的窗口管理服务模块向显示模块发送用户界面1’的信息，显示模块可以基于用户界面1’的信息显示用户界面1’。

以应用程序1是“桌面”应用程序为例，容易理解，在电子设备100处于完全折叠形态的情况下，显示模块显示的用户界面1’可以为图7A所示的用户界面；在电子设备100处于完全展开形态的情况下，显示模块显示的用户界面1’可以为图8A所示的用户界面。

下面结合阶段二(步骤S1005-步骤S1015)来介绍电子设备100触发折叠屏展开/折叠事件、创建动画并显示动画效果的一种可能的内部实现方式：

阶段二：触发折叠屏展开/折叠事件、创建动画并显示动画效果

S1005-S1006、电子设备100的窗口管理服务模块检测到用户触发折叠屏展开/折叠事件，响应于该事件，电子设备100的窗口管理服务模块可以向应用程序1发送消息1’，该消息中包括折叠屏展开/折叠事件的信息。

其中，上述步骤S1005-步骤S1006可以是电子设备100在显示上述初始用户界面的情况下执行。

其中，上述折叠屏展开/折叠事件可以包括：由完全折叠形态切换到完全展开形态、由完全展开形态切换到完全折叠形态。

其中，窗口管理服务模块可以是通过调用onConfigurationChanged这一方法来向应用程序1发送上述消息1’的。

其中，上述折叠屏展开/折叠事件的信息可以包括：折叠屏由完全折叠形态切换到完全展开形态的信息，或，折叠屏由完全展开形态切换到完全折叠形态的信息。

S1007、电子设备100的应用程序1基于折叠屏展开/折叠事件的信息确定需要更新界面元素的信息，并确定需要创建动画1’。

具体地，应用程序1在接收到窗口管理服务模块发送的上述消息1’之后，可以基于上述消息1’中包括的折叠屏展开/折叠事件的信息确定需要更新界面元素的信息，也即是说，在确定触发折叠屏展开/折叠事件之后，应用程序1需要向窗口管理模块更新界面元素的信息，以便电子设备100可以基于更新后的界面元素的信息来显示折叠屏展开/折叠之后的用户界面。

同时，应用程序1还可以确定需要创建动画1’，其中，动画1’可以是从折叠屏展开/折叠之前的用户界面切换到折叠屏展开/折叠之后的用户界面过程中的转场动画(也可以称为过渡动画)。

S1008、电子设备100的应用程序1向窗口管理服务模块发送界面元素的信息2’。

具体地，电子设备100的应用程序1在基于折叠屏展开/折叠事件的信息确定需要更新界面元素的信息之后，可以向窗口管理服务模块发送界面元素的信息2’。

其中，界面元素的信息2’可以为折叠屏展开/折叠之后的用户界面(即目的用户界面，例如下述用户界面2’)中包括的一个或多个界面元素的信息，界面元素的信息2’可以包括上述一个或多个界面元素的绘制信息(例如界面元素的位置、大小、角度、颜色等信息)、标识信息(例如界面元素的ID)等。

S1009、电子设备100的应用程序1向过渡模块发送消息2’，该消息用于指示过渡模块创建动画1’。

具体地，电子设备100的应用程序1在基于折叠屏展开/折叠事件的信息确定需要更新界面元素的信息之后，可以向过渡模块发送上述消息2’。

在一些实施例中，应用程序1可以通过过渡模块中提供的一些接口(例如createViewGroupTransition)来在过渡模块中创建一个对象，过渡模块可以在该对象中添加创建好的动画1’。

需要说明的是，本申请实施例对执行上述步骤S1008与上述步骤S1009的时间顺序不作限定，例如，上述步骤S1008与上述步骤S1009可以同时执行；又例如，上述步骤S1008可以先于上述步骤S1009执行；再例如，上述步骤S1008可以后于上述步骤S1009执行。

S1010、电子设备100的窗口管理服务模块基于界面元素的信息2’和折叠屏的信息确定用户界面2’(即目的用户界面)的信息，该信息中包括用户界面2’中的界面元素的布局参数。

具体地，在接收到应用程序1发送的界面元素的信息2’之后，电子设备100的窗口管理服务模块可以基于界面元素的信息2’和折叠屏的信息(例如折叠屏的尺寸信息、形态信息等)来确定用户界面2’(即目的用户界面)的信息。

其中，用户界面2’的信息可以为用于描述用户界面2’的相关信息，例如，该信息中可以包括用户界面2’中包括的一个或多个界面元素的布局参数(例如界面元素在屏幕中显示的位置、大小等参数信息)，还可以包括用户界面2’中包括的一个或多个界面元素的其他参数(例如角度、颜色等参数信息)。

在一些实施例中，窗口管理服务模块可以保存用户界面2’的信息。

S1011-S1012、电子设备100的过渡模块获取布局参数1’和布局参数2’，其中，布局参数1’为用户界面1’中的界面元素的布局参数，布局参数2’为用户界面2’中的界面元素的布局参数。之后，电子设备100可以基于布局参数1’和布局参数2’确定动画1’的信息。

具体地，电子设备100的过渡模块在确定需要创建动画(CreateAnimator)的情况下，可以分别获取布局参数1’和布局参数2’，其中，布局参数1’可以为折叠屏展开/折叠之前的用户界面(例如上述用户界面1’)中包括的一个或多个界面元素的布局参数，布局参数2’可以为折叠屏展开/折叠之后的用户界面(例如上述用户界面2’)中包括的一个或多个界面元素的布局参数。

其中，过渡模块可以通过调用captureStartValues这一方法来获取布局参数1’，例如，布局参数1’可以是过渡模块从电子设备100的系统服务模块中(例如窗口管理服务模块中)获取到的。

其中，过渡模块可以通过调用captureEndValues这一方法来获取布局参数2’，例如，布局参数2’可以是过渡模块从电子设备100的系统服务模块中(例如窗口管理服务模块中)获取到的。

进一步地，在获取到布局参数1’和布局参数2’之后，过渡模块可以基于布局参数1’和布局参数2’来确定动画1’的信息，从而完成创建动画1’。这样，可以使得动画效果显示过程中界面元素的布局效果逐渐由布局参数1’对应的布局效果平滑过渡到布局参数2’对应的布局效果，提高用户的视觉体验。

其中，动画1’的信息中可以包括实现该动画1’的动画效果的内部逻辑信息，例如，动画效果持续时间内的每一帧动画对应的用户界面中包括的一个或多个界面元素的布局参数，或，动画效果持续时间内的每一帧动画对应的用户界面中包括的一个或多个界面元素的布局参数相对于布局参数1’的修改量，等等。

在本申请实施例中，上述动画1’的信息也可以是电子设备100基于布局参数1’、布局参数2’、一个或多个动画接口(即用于配置动画信息的函数、方法)来确定的，这一个或多个动画接口可以是过渡模块提供的，这一个或多个动画接口可以被应用程序1调用，不同的动画接口可以创建不同动画效果的动画，应用程序1可以根据需求调用。

在一些实施例中，过渡模块也可以不用获取布局参数2’，而是只基于布局参数1’来确定动画1’的信息。

在一些实施例中，过渡模块还可以基于布局参数1’、布局参数2’、和/或其他参数(例如角度)来确定动画1’的信息。

容易理解，上述动画1’可以包括一个或多个子动画，这一个或多个子动画为上述一个或多个界面元素的部分或全部界面元素对应的动画。一个子动画即为一个界面元素对应的动画，该子动画的信息可以是基于该界面元素的布局参数(也可以称为子布局参数，即每一个界面元素的布局参数)和/或其他参数(例如角度)来确定的。在这一个或多个子动画为上述一个或多个界面元素的部分界面元素对应的动画的情况下，上述布局参数1’和布局参数2’可以为上述一个或多个界面元素的部分界面元素对应的布局参数；在这一个或多个子动画为上述一个或多个界面元素的全部界面元素对应的动画的情况下，上述布局参数1’和布局参数2’可以为上述一个或多个界面元素的全部界面元素对应的布局参数。

在一些实施例中，上述动画1’也可以是应用程序1自定义生成的，这样，过渡模块就不需要再重新创建动画，应用程序1可以把动画1’的信息发送给过渡模块，从而可以进一步来触发动画1’的动画效果。

S1013、电子设备100的应用程序1向过渡模块发送消息3’，该消息用于指示过渡模块触发动画1的动画效果。

其中，应用程序1可以是通过调用触发动画效果的方法(例如viewGroupTransition.go这一方法)来向过渡模块发送上述消息3’，以指示过渡模块触发动画1’的动画效果。

其中，上述步骤S1013可以是在步骤S1009执行完之后就执行，也可以是与步骤S1011或步骤S1012同时执行，也可以是先于步骤S1012执行，本申请实施例对此不作限定。

S1014、电子设备100的过渡模块向显示模块发送消息4’，该消息中包括动画1’的信息。

具体地，电子设备100的过渡模块在确定出动画1’的信息之后，可以向显示模块发送消息4’，该消息中可以包括动画1’的'信息。

S1015、电子设备100的显示模块基于动画1’的信息显示动画1’的动画效果。

具体地，电子设备100的显示模块在接收到过渡模块发送的上述消息4’之后，可以基于上述消息4’中的动画1’的信息显示动画1’的动画效果。

其中，显示动画1’的动画效果的过程可以是指电子设备100在折叠屏上显示动画1’中包括的每一帧动画所对应的用户界面的过程。

举例来说，在折叠屏展开/折叠场景下，上述动画1’对应的用户界面可以有以下几种：

(1)在“由完全折叠形态切换到完全展开形态”的情况下，上述动画1’对应的用户界面可以是“由图7A所示的完全折叠形态切换到图7D所示的完全展开形态”这一过程中多帧转场动画对应的用户界面(例如可以包括图7B和图7C所示的用户界面)。

(2)在“由完全展开形态切换到完全折叠形态”的情况下，上述动画1’对应的用户界面可以是“由图8A所示的完全展开形态切换到图8D所示的完全折叠形态”这一过程中多帧转场动画对应的用户界面(例如可以包括图8B和图8C所示的用户界面)。

下面结合阶段三(步骤S1016-步骤S1017)来介绍电子设备100显示目的用户界面的一种可能的内部实现方式：

阶段三：显示目的用户界面(即折叠屏展开/折叠之后最终显示的用户界面)

S1016-S1017、电子设备100的窗口管理服务模块向显示模块发送用户界面2’的信息，显示模块可以基于用户界面2’的信息显示用户界面2’。

其中，步骤S1016可以是步骤S1015完成之后执行，也可以是在步骤S1010之后就执行，本申请实施例对此不作限定。

显示模块在显示完成动画1’的动画效果之后，可以基于用户界面2’的信息显示用户界面2’。

同样以应用程序1是“桌面”应用程序为例，容易理解，在电子设备100的折叠屏被切换到完全展开形态的情况下，显示模块显示的用户界面2’可以为图7D所示的用户界面；在电子设备100的折叠屏被切换到完全折叠形态的情况下，显示模块显示的用户界面2’可以为图8D所示的用户界面。

通过实施上述图10所示的方法，在电子设备100进行折叠屏展开/折叠的过程中，电子设备100可以提供基于用户界面中包括的一个或多个界面元素的布局参数来设置转场动画的能力，减小系统的响应时延，并且可以支持应用程序或系统自主定制转场动画，其中，应用程序可以通过电子设备100提供的调用接口来实现自主定制的转场动画，接入较为自由，由于每一个界面元素都可以被感知且独立做变化，因此可以支持自主定制元素级的转场动画。而且，应用程序可以监听动画效果的显示过程，因此，电子设备100还可以支持转场动画的动画效果可打断的效果。

下面介绍本申请实施例提供的一种电子设备100的结构示意图。

图11示例性示出了本申请实施例提供的一种电子设备100的结构。

如图11所示，电子设备100可以包括：窗口管理服务(WindowsManagerService,WMS)模块101、应用程序(Application,APP)102、过渡(Transition)模块103。

窗口管理服务模块101可以用于识别转场类型(包括横竖屏切换、折叠屏展开/折叠)，例如，检测用户触发屏幕旋转事件或折叠屏展开/折叠事件；与应用程序102进行信息交互(例如向应用程序102发送屏幕旋转事件的信息或折叠屏展开/折叠事件的信息)；等等。

应用程序102可以用于与过渡模块103进行信息交互(例如指示过渡模块103创建动画、指示过渡模块103触发动画效果等)；还可以用于与窗口管理服务模块101进行信息交互(例如向窗口管理服务模块101发送界面元素的信息)；等等。

过渡模块103(也可以称为基于Transition框架的布局刷新系统)可以用于创建动画，实现转场前后界面元素的布局参数的过渡；与应用程序102进行信息交互；等等。在本申请实施例中，过渡模块103可以集成有安卓原生的过渡引擎(TransitionEngine)。

电子设备100还可以包括：显示模块(图中未示出，可以包括屏幕)，显示模块可以用于显示动画的动画效果；显示横竖屏切换前后的用户界面；显示折叠屏展开/折叠前后的用户界面；等等。

需要说明的是，图11所示的电子设备100仅仅是本申请实施例的一种实现方式，实际应用中，电子设备100还可以包括更多或更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置，本申请实施例在此不作限定。

关于电子设备100的功能和工作原理的更多细节，可以参照上述各个实施例中的相关内容，在此不再赘述。

下面介绍本申请实施例提供的一种电子设备100的软件结构。

图12示例性示出了本申请实施例中提供的一种电子设备100的软件结构。

如图12所示，电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

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

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

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

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

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

窗口管理服务模块可以用于管理窗口程序，还可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。在本申请实施例中，窗口管理服务模块还可以用于识别转场类型(包括横竖屏切换、折叠屏展开/折叠)，例如，检测用户触发屏幕旋转事件或折叠屏展开/折叠事件。

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

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

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

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

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

过渡模块用于创建动画，实现转场前后界面元素的布局参数的过渡。

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

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

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

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

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

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

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

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

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

下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。

当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用框架层的接口，启动相机应用，进而通过调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。

下面介绍本申请实施例提供的另一种电子设备100的结构示意图。

图13示例性示出了本申请实施例中提供的另一种电子设备100的结构。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。

气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。

磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。

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

距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。

环境光传感器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所处的位置不同。

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

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

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

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

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

应当理解的是，图13所示电子设备100仅是一个范例，并且电子设备100可以具有比图13中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图13中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。

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

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：ROM或随机存储记忆体RAM、磁碟或者光盘等各种可存储程序代码的介质。

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

Claims (14)

1.一种显示方法，应用于包括显示屏的电子设备，其特征在于，所述方法包括：

在所述电子设备处于第一姿态的情况下，所述电子设备在所述显示屏上显示第一用户界面，所述第一用户界面中包括一个或多个界面元素；

所述电子设备检测到第一事件，所述第一事件为用户触发将所述电子设备从所述第一姿态切换到第二姿态的事件；

响应于所述第一事件，所述电子设备播放第一动画，所述第一动画是基于第一布局参数和第二布局参数生成的，所述第一动画中包括一个或多个子动画，所述一个或多个子动画为所述一个或多个界面元素中的部分或全部界面元素对应的动画；

所述电子设备在所述显示屏上显示第二用户界面，所述第二用户界面为所述第一用户界面在所述电子设备处于所述第二姿态时的用户界面；

其中，所述第一布局参数为所述一个或多个界面元素中的部分或全部界面元素显示于所述第一用户界面时的布局参数，所述第二布局参数为所述一个或多个界面元素中的部分或全部界面元素显示于所述第二用户界面时的布局参数。

2.根据权利要求1所述的方法，其特征在于，所述第一姿态为竖屏姿态，所述第二姿态为横屏姿态；或，所述第一姿态为横屏姿态，所述第二姿态为竖屏姿态。

3.根据权利要求1所述的方法，其特征在于，所述显示屏为折叠屏，所述第一姿态为展开姿态，所述第二姿态为折叠姿态或半折叠姿态；或，所述第一姿态为折叠姿态或半折叠姿态，所述第二姿态为展开姿态。

4.根据权利要求1-3任一项所述的方法，其特征在于，在所述第一动画中包括多个子动画的情况下，所述多个子动画相同或不同。

5.根据权利要求1-4任一项所述的方法，其特征在于，在所述电子设备播放第一动画之前，所述方法还包括：

所述电子设备获取所述第一布局参数和所述第二布局参数；

所述电子设备基于所述第一布局参数和所述第二布局参数确定所述第一动画的信息，所述第一动画的信息用于所述电子设备播放所述第一动画。

6.根据权利要求5所述的方法，其特征在于，所述一个或多个界面元素包括第一界面元素，所述第一布局参数包括第一子布局参数，所述第一子布局参数为所述第一界面元素显示于所述第一用户界面时的布局参数，所述第二布局参数包括第二子布局参数，所述第二子布局参数为所述第一界面元素显示于所述第二用户界面时的布局参数，所述第一动画的信息包括所述一个或多个子动画的信息，所述一个或多个子动画的信息包括所述第一界面元素对应动画的信息，所述第一界面元素对应动画的信息是所述电子设备基于第一子布局参数和所述第二子布局参数确定的。

7.根据权利要求6所述的方法，其特征在于，所述第一子布局参数包括所述第一界面元素在所述第一用户界面中的位置、大小中的一项或多项，所述第二子布局参数包括所述第一界面元素在所述第二用户界面中的位置、大小中的一项或多项。

8.根据权利要求7所述的方法，其特征在于，所述电子设备确定所述第一界面元素对应动画的信息，具体包括：

所述电子设备基于所述第一界面元素在所述第一用户界面和所述第二用户界面中的位置、大小中的一项或多项确定所述第一界面元素对应动画的信息；

或，

所述电子设备基于所述第一界面元素在所述第一用户界面和所述第二用户界面中的位置、大小中的一项或多项，以及所述第一界面元素在所述第一用户界面和所述第二用户界面中的角度来确定所述第一界面元素对应动画的信息。

9.根据权利要求5-8任一项所述的方法，其特征在于，所述电子设备包括第一应用、过渡模块，所述第一用户界面为所述第一应用的一个用户界面，在所述电子设备获取所述第一布局参数和所述第二布局参数之前，所述方法还包括：

所述第一应用向所述过渡模块发送第一消息，所述第一消息用于指示所述过渡模块创建所述第一动画；

所述电子设备获取第一布局参数和第二布局参数，具体包括：

所述过渡模块获取第一布局参数和第二布局参数；

所述电子设备基于所述第一布局参数和所述第二布局参数确定所述第一动画的信息，具体包括：

所述过渡模块基于所述第一布局参数和所述第二布局参数确定所述第一动画的信息。

10.根据权利要求9所述的方法，其特征在于，在所述第一应用向所述过渡模块发送第一消息之后，所述方法还包括：

所述第一应用向所述过渡模块发送第二消息，所述第二消息用于指示所述过渡模块通过所述显示屏播放所述第一动画。

11.根据权利要求9或10所述的方法，其特征在于，在所述第一应用向所述过渡模块发送第一消息之前，所述方法还包括：

所述第一应用获取所述第一事件的信息；

所述第一应用基于所述第一事件的信息确定通过所述过渡模块生成所述第一动画。

12.根据权利要求9-11任一项所述的方法，其特征在于，所述第一动画是所述第一应用通过调用动画接口生成的，所述动画接口是所述过渡模块提供的。

13.一种电子设备，其特征在于，所述电子设备包括一个或多个处理器和一个或多个存储器；其中，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如权利要求1-12中任一项所述的方法。

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