CN117827300A - 显示方法、图形界面及相关装置 - Google Patents

Abstract

本申请公开了显示方法、图形界面及相关装置，该显示方法能够在检测到用于作用于第一界面元素的操作后，用放大应用图标的图标启动动画来过渡应用窗口准备好之前的空缺。这样，在用户启动应用之后，无需等待较长的时间就可以快速查看到电子设备做出的响应，即查看到电子设备显示的图标启动动画，提升用户的视觉体验感。

Description

显示方法、图形界面及相关装置

技术领域

本申请涉及终端领域，尤其涉及显示方法、图形界面及相关装置。

背景技术

为了给用户带来更好的视觉效果，应用启动时往往会出现应用窗口从小到大变化的窗口启动动画。但是显示窗口启动动画的前提为应用窗口准备就绪，换句话说，如果应用窗口未准备好，则无法显示窗口启动动画。那么，在启动应用时，如果应用窗口未及时准备就绪，则可能会出现窗口启动动画消失，或用户等待较长时间才能查看到窗口启动动画的情况，影响用户的视觉体验。

因此，如何改善启动应用时，出现的上述情况，是目前亟待解决的问题。

发明内容

本申请提供了显示方法、图形界面及相关装置，实现了在启动应用时，利用图标启动动画填补准备应用窗口时的空缺，提升用户的视觉体验感。

第一方面，本申请实施例提供了一种显示方法，该方法包括：电子设备检测到作用于第一界面元素的第一操作；响应于第一操作，电子设备显示第一启动动画，第一启动动画包括第一界面元素的放大过程；第一应用的应用窗口绘制完成，电子设备显示窗口启动动画，显示窗口启动动画，包括：应用窗口中显示的内容逐渐增多且显示内容的尺寸逐渐变大；窗口启动动画结束，应用窗口中显示有第一应用的第一页面。

实施第一方面提供的方面，在电子设备检测到用户启动应用的操作后，电子设备可以先显示第一启动动画，再在应用窗口绘制完成后，显示窗口启动动画，从而完成应用启动过程中的动画显示。这样，在用户启动应用之后，无需等待应用窗口的绘制，就可以快速查看到电子设备做出的响应，即查看到第一启动动画，给用户一种应用响应速度变快的视觉感受，提升用户的视觉体验感。

结合第一方面，在一种实现方式中，电子设备显示第一启动动画之前，该方法还包括：第一界面元素包括第一前景层和第一背景层；电子设备基于第一比例放大第一前景层，得到第二前景层；电子设备基于第二比例放大第一背景层，得到第二背景层，其中，第二背景层的大小与第一页面的大小相同；电子设备根据第二前景层和第二背景层生成第一启动动画的图像帧；第一启动动画用于展示第一前景层向第二前景层放大的过程，以及第一背景层向第二背景层放大的过程。

可以看出，将第一界面元素拆分成前景层和背景层来分别得到第一启动动画的图像帧中的前景层和背景层，电子设备显示的第一启动动画可以包括第一界面元素中的前景层和背景层分开放大的过程，避免了第一界面元素作为一个整体在放大过程中出现画面失真的问题，同时也实现了在外形上，第一界面元素到应用页面的平滑过渡。

结合第一方面，在一种实现方式中，第一比例不同于第二比例。

也就是说，在第一启动动画中，第一界面元素的前景层和背景层的放大比例不同，可以使得第一启动动画中的画面放大效果更加生动丰富。

结合第一方面，在一种实现方式中，电子设备显示第一启动动画之前，该方法还包括：电子设备基于第三比例放大第一界面元素，得到第二前景层；电子设备根据第二前景层和第二背景层生成第一启动动画的图像帧，其中，第二背景层包括第一图片，第一图片的大小与第一页面的大小相同，第一启动动画用于展示第一界面元素向第二前景层放大的过程，以及第一图片的出现和放大过程。

也就是说，在电子设备检测到用户作用于第一界面元素启动第一应用时，电子设备显示的图标启动动画可以包括第一界面元素的放大过程，以及新增的背景图的放大过程，避免了第一界面元素作为一个整体在放大过程中出现画面失真的问题，同时也实现了在外形上，第一界面元素到应用页面的平滑过渡。

结合第一方面，在一种实现方式中，第一图片为第一颜色的纯色背景图，第一颜色包括以下任意一种情况：第一颜色为预置的颜色，第一颜色为第一界面元素中包含的颜色，或者，第一颜色的色彩值为第一界面元素中包含的颜色的色彩值*系数；或者，第一图片为从第二颜色到第三颜色过渡的渐变背景图，其中，第二颜色和/或第三颜色为基于第一界面元素中包含的颜色得到的。

其中，第一图片可以为纯色背景图也可以为渐变背景图，其中，纯色背景图可以是指第一启动动画的画面更加整洁干净，渐变背景图可以使得第一启动动画的画面更加丰富生动。

结合第一方面，在一种实现方式中，第一启动动画的图像帧为电子设备通过View动画创建的视图，或者，第一启动动画的图像帧为电子设备通过窗口动画创建的图标窗口中承载的显示内容，图标窗口不同于第一应用的应用窗口。

也就是说，通过View动画来创建第一启动动画的图像帧，或者，通过窗口动画来创建第一启动动画所需的图标窗口，可以使得第一启动动画不受应用窗口的限制，第一启动动画不需要等待应用窗口绘制完成就能够直接进行显示。

结合第一方面，在一种实现方式中，电子设备根据第二前景层和第二背景层生成第一启动动画的图像帧，包括：电子设备基于第二前景层、第二背景层和第一启动动画的动画属性生成第一启动动画的图像帧，其中，第一启动动画的动画属性包括第二前景层的动画属性和第二背景层的动画属性；电子设备显示窗口启动动画之前，包括：电子设备基于第一应用的应用窗口和第一应用的应用窗口的动画属性生成窗口启动动画的图像帧；第一启动动画所在图层位于窗口启动动画所在图层的下方；第二背景层的动画属性与第一应用的应用窗口的动画属性一致，动画属性包括以下一项或多项：位移、缩放、裁剪和圆角。

第一启动动画的动画属性和窗口启动动画的动画属性保持一致，可以使得在应用窗口绘制完成后，电子设备显示的第一启动动画能够平滑过渡到窗口启动动画，提升用户的视觉体验感。

结合第一方面，在一种实现方式中，电子设备显示第一启动动画之后，该方法还包括：电子设备启动窗口容器动画，窗口容器动画与第一启动动画在同一时刻拥有相同的动画属性；电子设备显示窗口启动动画之前，该方法还包括：电子设备将应用窗口更新到窗口容器动画中。

也就是说，可以通过创建窗口容器动画来实现第一启动动画到窗口启动动画的平滑过渡。

结合第一方面，在一种实现方式中，电子设备在显示到第一启动动画的第一图像帧时，第一应用的应用窗口绘制完成，电子设备显示的窗口启动动画，包括从第一大小的应用窗口到第二大小的应用窗口的放大过程，其中，第一大小大于或等于第一图像帧的大小，第二大小为第一页面的大小。

也就是说，在电子设备显示窗口启动动画时，显示的窗口启动动画为接着第一启动动画的放大动画继续播放的放大动画。

结合第一方面，在一种实现方式中，第一界面元素包括以下任意一项：应用图标、服务卡片、widget、通知栏、多任务界面中的历史任务。

结合第一方面，在一种实现方式中，窗口启动动画的前N帧图像的透明度逐渐降低。

也就是说，在显示窗口启动动画时，该窗口启动动画的图像帧还包括淡入动画，降低了窗口启动动画突然出现的突兀感。

结合第一方面，在一种实现方式中，在电子设备显示第一启动动画的过程中，该方法还包括：电子设备检测到第二操作；第二操作用于退出第一应用；响应于第二操作，电子设备倒放已显示的第一启动动画中的图像帧，或者，电子设备继续显示第一启动动画的M帧图像，再倒放已显示的第一启动动画中的图像帧，且继续显示的M帧图像中，随着时间的推移，M帧图像的播放速度逐渐减小，倒放显示的前L帧图像的播放速度逐渐增大。

在电子设备显示第一启动动画的过程中，电子设备还可以检测到用户打断该第一启动动画的操作，倒放已显示的图像帧，实现在应用退出过程中，显示退出动画，或者，先启动播放第一启动动画，再倒放已显示的图像帧，这样，可以避免在用户打断动画之后，存在动画突变，使动画能够平滑过渡，提升动画的流畅度。

结合第一方面，在一种实现方式中，第二操作包括滑动操作，在电子设备倒放已显示的第一启动动画中的图像帧的过程中，前K帧图像跟随用户的滑动轨迹进行移动。

也就是说，退出动画中还包括跟手动画，提升用户与电子设备的交互体验感。

结合第一方面，在一种实现方式中，其特征在于，在电子设备显示第一启动动画的过程中，该方法还包括：电子设备检测到第二操作；第二操作用于退出第一应用；当第一应用的应用窗口绘制完成后，响应于第二操作，电子设备显示第一应用的应用窗口到第一界面元素的退出动画。

也就是说，在电子设备显示第一启动动画的过程中，若电子设备检测到用户退出应用的操作时，应用窗口绘制完成，则电子设备显示应用窗口到第一界面元素的退出动画。

结合第一方面，在一种实现方式中，第一启动动画由电子设备中的系统单元创建，系统单元不同于第一应用。

可见，本申请实施例提供的显示方法通过在显示应用提供的应用窗口之前，由系统新增第一启动动画来填补应用窗口准备就绪之前的空缺，可以避免用户等待较长时间才能查看到应用启动所作出的响应，从视觉上加快应用启动的速度。

第二方面，本申请实施例提供了一种电子设备，包括存储器，一个或多个处理器，以及一个或多个程序；一个或多个处理器在执行一个或多个程序时，使得电子设备实现如第一方面或第一方面中的任意一种实现方式所描述的方法。

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

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

附图说明

图1A-图1F以及图2A-图2C为本申请实施例提供的电子设备100在启动应用时，显示启动动画所涉及的相关用户界面；

图3为本申请实施例提供的电子设备100生成的初始图像的示意图；

图4为本申请实施例提供的图标图层和应用窗口层的图层关示意图；

图5为本申请实施例提供的启动动画涉及到的多帧图像的边界示意图；

图6为本申请实施例提供的图标启动动画以及窗口启动动画的多帧图像的示意图；

图7为本申请实施例提供的电子设备100生成图标启动动画在T3时刻对应的图像帧的示意图；

图8A-图8D为本申请实施例提供的电子设备100通过服务卡片启动应用时，涉及到的相关用户界面；

图9A-图9F为本申请实施例提供的在电子设备100完成应用的启动后，检测到用户退出应用的操作时，显示的相关用户界面；

图10A-图10D以及图11A-图11D为本申请实施例提供的电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作时，涉及到的相关用户界面；

图12为本申请实施例提供的电子设备100的软件结构框图；

图13为本申请实施例提供的弹簧曲线的示意图；

图14为本申请实施例提供的电子设备100在应用启动时显示启动动画的内部模块交互图；

图15为本申请实施例提供的应用启动方式与一种应用启动方式的时序对比图；

图16为本申请实施例提供的电子设备100在应用启动过程被用户打断后显示退出动画的内部模块交互图；

图17为本申请实施例提供的显示方法的流程示意图；

图18为本申请实施例提供的利用第一界面元素的颜色生成第一图像的流程示意图；

图19为本申请实施例提供的对第一界面元素提取颜色的四个端点示意图；

图20-图24为本申请实施例提供的第一图像的多种示意图；

图25为本申请实施例提供的电子设备100的硬件结构示意图。

具体实施方式

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

以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。

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

本申请实施例提供了一种显示方法，该显示方法能够在检测到用户作用于应用图标的启动操作后，用放大应用图标的图标启动动画来过渡应用窗口准备好之前的空缺。这样，在用户启动应用之后，无需等待较长的时间就可以快速查看到电子设备做出的响应，即查看到电子设备显示的图标启动动画，提升用户的视觉体验感。

图1A-图1F以及图2A-图2C示出了电子设备100在启动应用时，显示启动动画所涉及的相关用户界面。其中，该启动动画包括图标启动动画以及应用的窗口启动动画。

图1A示出了电子设备100上用于应用程序菜单的示例性用户界面10。

如图1A所示，用户界面10可包括：状态栏101、时间和天气指示符102、一个或多个应用程序图标103。其中，状态栏101可包括移动通信信号的一个或多个信号强度指示符、无线高保真(wirelessfidelity，WiFi)信号的一个或多个信号强度指示符、电池状态指示符以及时间指示符。时间和天气指示符102可用于指示当前时间以及天气类型。一个或多个应用程序图标103可用于展示一个或多个应用程序图标。其中，一个或多个应用程序图标103可包括应用图标103A。该应用图标103A可用于触发打开游戏中心应用。

示例性地，当电子设备100检测到作用于应用图标103A的用户操作，例如，点击操作，响应于该操作，电子设备100可以打开游戏中心应用，并显示图1A-图1D所示的图标启动动画以及图1E-图1F所示的窗口启动动画。

可以理解的是，图1A-图1F以游戏中心应用为例，示出了电子设备100在启动应用时，显示的相关用户界面，在本申请其他实施例中，还可以以其他任意应用为例，且应用启动时，显示的动画类似，本申请实施例对用户启动的应用不作限制。

另外，电子设备100除了通过检测到作用于应用图标的操作，启动应用之外，还可以检测到作用于其他界面元素，触发启动应用。关于其他界面元素的描述可以参见后续图8A-图8D的相关内容，这里先不展开。

如图1A-图1D所示，图标启动动画可包括应用图标103A从图1A-图1D逐渐放大显示的过程。具体地，可以是指：从图1A所示的应用图标103A，到图1B所示的图像01、到图1C所示的图像02、到图1D所示的图像03的切换过程。

从图1A-图1D所示的图标启动动画可以看出，该图标启动动画显示了图1A所示的应用图标103A的前景层和背景层分开放大的过程。

需要注意的是，图1B-图1D所示的图像01-图像03为电子设备100检测到用户作用于应用图标103A后，生成的图标启动动画中的多帧图像。

并且，在电子设备100检测到作用于应用图标103A的用户操作后，响应于该操作，电子设备100开始准备应用窗口，在应用窗口准备完成后，即可显示应用的窗口启动动画。

本申请实施例在上述图1A-图1D显示的图标启动动画可以为准备应用窗口的过程，电子设备100显示的过渡动画，避免用户在启动应用后，等待电子设备100准备应用窗口。这样，可以给用户从视觉上营造出一种“点击即响应”的体验感，从用户的视觉感受上加快了应用的启动速度。

之后，在电子设备100播放图标启动动画的过程中，或结束图标启动动画的播放后，如果应用窗口准备完成，则电子设备100可以显示窗口启动动画，该窗口启动动画用于展示应用窗口逐渐放大的过程，该应用窗口用于显示应用提供的启动页面。示例性地，该窗口启动动画可以包括图1E-图1F所示的图像04-图像05。

从图1E-图1F可以看出，窗口启动动画显示了应用启动时，应用提供的启动页面的放大过程，并最终显示为应用启动完成时，展示的图1F所示的全屏页面。其中，该启动页面可以为应用提前缓存好的一张图像，也可以为应用启动时默认显示的主页面，也可以为应用提前预置的启动动画等等。本申请实施例对该启动页面不作限制。

示例性地，在图1E-图1F所示的用户界面中，该启动页面可以为游戏中心应用启动时默认显示的主页页面。

另外，需要注意的是，在电子设备100先后显示图标启动动画和窗口启动动画的过程中，从图标启动动画过渡到窗口启动动画时，为了保证过渡的自然，窗口启动动画中的应用窗口跟随图标启动动画中的图像的放大趋势继续放大。

并且，在图标启动动画过渡到窗口启动动画时，电子设备100可以显示图1E中的(a)或(b)所示的图像04。

结合图1D-图1E中的(a)可以看出，如果应用窗口准备就绪，则电子设备100可以直接从显示的图标启动动画切换到窗口启动动画。即图1E中的(a)中不再显示有图标启动动画中的图像帧。

结合图1D-图1E中的(b)可以看出，如果应用窗口准备就绪，则电子设备100可以在从图标启动动画切换到窗口启动动画的过程中，增加图标启动动画到窗口启动动画的透明度过渡动画。具体地，图标启动动画中的画面的透明度逐渐增大，和/或，窗口启动动画中的画面的透明度逐渐降低。

可以理解的是，电子设备100显示的图标启动动画不限于图1A-图1D所示的多帧图像，电子设备100在启动应用时，显示的图标启动动画还可以包含更多或更少的多帧图像。同样地，电子设备100显示的窗口启动动画不限于图1E-图1F所示的多帧图像，电子设备100在启动应用时，显示的窗口启动动画还可以包含更多或更少的多帧图像。

并且，电子设备100在切换到窗口启动动画时，最开始显示的画面，与应用启动完成，即显示全屏的页面时，显示的画面可以不同。例如，如果该“游戏中心”应用启动时会先显示一段游戏相关的宣传动画，再显示主页页面，则在显示应用窗口逐渐放大的窗口启动动画中，应用窗口中可以先显示为该宣传动画的相关画面，在该宣传动画播放完毕后，再在应用窗口中显示主页页面。

另外，需要注意的是，由于电子设备100是在应用窗口准备好之后，显示窗口启动动画，因此，电子设备100显示窗口启动动画的时机不限于在电子设备100显示图1D所示的图像03之后显示窗口启动动画。例如，在电子设备100显示图标启动动画的过程中，如果电子设备100在显示图1C所示的图像02时准备好应用窗口，则在电子设备100继续显示图1D时，图1D所示的图像03中显示的内容可以替换为应用的启动页面中的内容。又例如，在电子设备100显示图标启动动画的过程中，如果图标启动动画中的图像已放大到全屏时准备好应用窗口，则窗口启动动画可以仅包含图1F所示的图像帧。

具体关于电子设备100先后显示图标启动动画和窗口启动动画的原理可以参见后续图3-图7中的内容，这里先不赘述。

在另外一种可能的实现方式中，电子设备100在检测到作用于图1A所示的应用图标103A的启动操作后，显示的图标启动动画还可以显示为图2A、图2B、图2C所示的图像06-08。

从图1A、图2A-图2C所示的图标启动动画可以看出，该图标启动动画显示了图1A所示的应用图标103A的逐渐放大的过程，以及应用图标103A所在图层之下的背景层(即图2A-图2C所示的图像06-图像07的白色背景)从无到有，到逐渐放大的过程。

示例性地，若电子设备100启动应用时，用户作用的应用图标，例如图1A所示的应用图标103A可以拆分成前景层和背景层，则电子设备100显示的图标启动动画可以为图1A-图1D所示的图标的前景层和背景层分开放大的动画过程，若电子设备100启动应用时，用户作用的应用图标，例如图1A所示的应用图标103A不能拆分成前景层和背景层，则电子设备100显示的图标启动动画可以为图1A、图2A-图2C所示的图标以及新增的背景层分开放大的动画过程。

在一些实施方式中，在图2A-图2C所示的图标启动动画中，该从无到有出现的背景层还可以存在透明度过渡动画，例如在图2A-图2C所示的图像06到图像07到图像08的切换显示过程中，图像的背景层的透明度逐渐降低。这样，在用户点击图标启动应用之后，用户可以观看到图标逐渐放大，以及图标的背景层逐渐显现出一个不断放大的背景板，并且该背景板逐渐向应用窗口的形状过渡，这样可以避免图标启动动画播放过程中存在背景层的突变，提升视觉效果。

可以理解的是，若电子设备100启动应用时，用户作用的应用图标，可以拆分成前景层和背景层，电子设备100也可以显示图标以及新增的背景层分开放大的动画效果。本申请实施例对此不作限制。

为了便于理解图标启动动画以及窗口启动动画，下面结合图3-图7介绍图标启动动画以及窗口启动动画涉及到的相关原理。

简言之，图标启动动画的实现原理为：根据应用图标创建一个初始图像，通过设置该初始图像的属性(位移、缩放、透明度、圆角、裁剪等等)，创建该图标启动动画的多帧图像。

图3为电子设备100生成的初始图像的示意图。

示例性地，若该应用图标为分层图标，即应用图标可以拆分成前景层和背景层，则电子设备100创建的初始图像可以是指图3中的(a)所示的图像A。图像A的前景层为放大一定倍数的应用图标的前景层，图像A的背景层为根据放大一定倍数的应用图标的背景层确定。该图像A的尺寸与电子设备100完成应用的启动后，显示的应用的主页页面的尺寸相同。

其中，图1B-图1D所示的图像01-03可以为通过设置该图像A的属性，生成的图像。例如，图1B所示的图像01为对该图像A中的前景层缩小0.6倍，背景层缩小0.6倍，并对背景层进行裁剪并设置圆角后的图像。

示例性地，若该应用图标为非分层图标，即应用图标不能拆分，则电子设备100创建的初始图像可以是指图3中的(b)所示的图像B。图像B的前景层为据放大一定倍数的应用图标，图像B的背景层为预置的图像。该图像B的尺寸与电子设备100完成应用的启动后，显示的应用的主页页面的尺寸相同。

其中，图2A-图2C所示的图像06-08可以为通过设置该图像B的属性，生成的图像。例如，图2A所示的图像06为对该图像A中的前景层缩小0.5倍，背景层缩小0.6倍，并对背景层进行裁剪并设置圆角后的图像。

可以理解的是，若应用图标为分层图标，电子设备100创建的初始图像也可以为图3中的(b)所示的图像B。

可见，在内部实现中，电子设备100在检测到用户作用于应用图标的启动操作后，电子设备100可以根据该应用图标生成一个初始图像，并通过设置该初始图像的属性，获得多张图像，这多张图像即为图标启动动画中的多帧图像。

另外，需要注意的是，在显示图标启动动画的过程中，如果应用窗口准备就绪，则电子设备100显示窗口启动动画。

示例性地，图4为本申请实施例提供的图标图层和应用窗口层的图层关示意图。

如图4所示，图标图层即为初始图像所在的图层，电子设备100可以在该图层显示图标启动动画，应用窗口层即为应用窗口所在的图层，电子设备100可以在该图层显示窗口启动动画。

从图4可以看出，图标图层位于应用窗口层的下方。这样，在电子设备100准备好应用窗口后，可以在图标图层的上方显示应用窗口，播放应用窗口的窗口启动动画，使得窗口启动动画可见，图标启动动画不可见是，实现从图标启动动画到窗口启动动画的切换。

另外，结合图1E中的(b)所示的图像04可以看出，在应用窗口准备好之后，在图4中，图标图层可以存在透明度逐渐升高的动画，和/或，应用窗口层可以存在透明度逐渐降低的动画。这样，在用户视角下，图标图层的透明度逐渐升高使得图标启动动画的画面逐渐淡化直至消失，应用窗口层的透明度逐渐降低使得窗口启动动画的画面逐渐显现直至完全展现出来。

可以理解的是，若图标图层位于应用窗口层的下方，则在电子设备100显示窗口启动动画的过程中，图标启动动画也一直处于显示状态，只不过由于图层的上下遮挡关系，窗口启动动画可见，图标启动动画不可见。另外，在本申请其他实施例中，图标图层也可以位于应用窗口层的上方，这种情况下，在应用窗口准备好之后，图标图层可以存在透明度逐渐升高的动画。这样，图标图层从最先开始的遮挡应用窗口层逐渐过渡直到消失。

为了保证图标启动动画到窗口启动动画的平滑过渡，图标图层与应用窗口层的属性动画应保持一致。其中，属性动画包括：缩放属性动画、位移属性动画、裁剪属性动画、圆角属性动画等等。这样，图标启动动画和窗口启动动画的播放，可以给用户营造一种应用图标逐渐变为应用页面的动画效果。

示例性地，图5示出了启动动画涉及到的多帧图像的边界示意图。

其中，图5示例性示出了从T0-T5时刻，启动动画涉及到的6帧图像的边界示意图。其中，T0时刻对应于电子设备100检测到用户作用于应用图标的启动操作的时刻，T0时刻对应的边界为桌面上的用户作用的应用图标的边界，T5时刻及之后时刻对应于电子设备100完全打开应用，显示全屏显示应用页面的时刻，T5时刻对应的边界为该应用页面的边界。

在内部实现中，电子设备100可以通过设置图标图层中的初始图像的大小、位置、圆角、裁剪等等属性，获得多帧图像，使得这多帧图像的边界为T0-T5中涉及的多帧图像的边界。同样的，电子设备100可以通过设置应用窗口的大小、位置、圆角、裁剪等等属性，获得多帧图像，使得这多帧图像的边界为T0-T5中涉及的多帧图像的边界。

举例来说，电子设备100依次显示图标启动动画在T0-Tx对应的图像帧，当在Tx+1(x＝0,1,2,3,4)时刻，应用窗口准备完毕，则电子设备100可以在Tx+1时刻开始显示窗口启动动画在Tx+1-T5对应的图像帧，从而实现图标启动动画与窗口启动动画的平滑过渡。

图6为本申请实施例提供的图标启动动画以及窗口启动动画的多帧图像的示意图。

其中，图6示出了电子设备100生成的图标启动动画以及窗口启动动画在T0-T5时刻分别对应的多帧图像。这多帧图像的位置和大小分别对应于图5所示的T0-T5时刻示出的边框的位置和大小。

在实际显示图标启动动画以及窗口启动动画的过程中，电子设备100可以按照T0-T5时刻的先后顺序，先从T0时刻依次显示图标启动动画中的各帧图像，然后在某一时刻，例如T4时刻，当应用窗口准备好，切换到显示窗口启动动画在该时刻到T5时刻以及之后对应的各帧图像。其中，在从图标启动动画过渡到窗口启动动画时，窗口启动动画在T5时刻对应的图像的动画属性，与图标启动动画在T5时刻对应的图像的动画属性相同。具体关于动画属性的描述可以参见后续图7中的相关内容。

也就是说，当应用窗口在播放到图标启动窗口的某一帧图像是绘制完成，则使用图标启动动画的下一帧图像的动画属性值来绘制将要显示的窗口启动动画在下一帧的图像，实现图标启动动画到窗口启动动画的过渡。

其中，若图标启动动画过渡到窗口启动动画时存在透明度的变化，电子设备100在显示窗口启动动画中的各帧图像的前N帧还可以继续显示图标启动动画中相对应的N帧图像，并通过升高图标启动动画中的图像的透明度，和/或，降低窗口启动动画中的图像的透明度，来实现图标启动动画到窗口启动动画的过渡。

另外，需要注意的是，图6所示的窗口启动动画在T0-T5时刻对应的多帧图像只是为了便于与图标启动动画中的多帧图像进行对比，在实际窗口启动动画中的前几帧可能并没有准备好应用窗口，或者并没有绘制图像。这是由于电子设备100需要在准备好应用窗口后，才能在应用窗口中绘制图像，因此，在应用窗口准备好之前，对应的多个时刻中可能并不存在图像。

为了便于理解图标启动动画中的每一帧图像的生成过程，图7示出了电子设备100生成图标启动动画在T3时刻对应的图像帧的示意图。

其中，本申请实施例中，对于一个属性动画来说，一帧图像中需要计算的动画属性包括但不限于缩放(scale)属性中的X方向缩放比例(scaleX)和Y方向缩放比例(scaleY)，位移(translate)属性中的X方向位移量(translateX)和Y方向位移量(translateY)，裁剪(crop)属性中的距离左侧边框的裁剪值(crop left)、距离顶部的裁剪值(crop top)、距离右侧边框的裁剪值(crop right)、距离底部的裁剪值(crop bottom)，透明度(alpha)属性，圆角属性(cornerRadius)。

从图7所示的示意图可以看出，图标启动动画在T3时刻对应的图像，相当于是将应用图标的前景层和背景层分别进行一定比例的放大(scale)。其中，前景层和背景层的放大比例可以相同或者不同，优选地，前景层和背景层的放大比例不同，这样，可以实现图标放大过程中更加美观的视觉放大效果。

进一步地，再按照裁剪区域1设置圆角属性(cornerRadius)，并对放大的图像进行裁剪(crop)，并进行一定的位移(translate)，从而得到T3时刻对应的图像帧。其中，裁剪区域1即为T3时刻对应的启动动画的边界大小。

另外，需要注意的是，在通过应用图标的背景层获得图像帧的背景层时，应用图标的背景层放大后的面积范围应超出裁剪区域1的范围，并且，图像帧的背景层为利用该裁剪区域1对放大后的背景层进行裁剪得到。这样，可以使得电子设备100生成的图标启动动画的图像帧的边缘不会出现白边，使图标启动动画中显示的画面更美观。

可以理解的是，图7仅重点描述了图标启动动画在T3时刻对应的图像帧的生成细节，对于其他时刻对应的图像帧的生成细节类似，这里不再赘述。

上述图1A-图1F、图2A-图2C、图3、图4、图5、图6、图7描述了电子设备100在检测到用户作用于应用图标的启动操作时，涉及到的图标启动动画和窗口启动动画。

在本申请其他实施例中，电子设备100还可以通过其他方式，触发启动应用，并显示图标启动动画和窗口启动动画。其中，电子设备100可以通过检测到用户作用于服务卡片、widget、通知栏、多任务界面中的历史任务等等界面元素的操作，触发启动应用，显示图标启动动画和窗口启动动画。

其中，用户作用的界面元素不同，图标启动动画不同。

服务卡片是应用的一种界面展现形式，服务卡片显示在桌面上，用于展示应用的重要信息，提供应用的部分功能。电子设备100可以检测到作用于该服务卡片的用户操作，例如点击操作，触发打开该服务卡片对应的应用。

示例性地，当电子设备100检测到用户作用于服务卡片的用户操作，触发启动应用时，电子设备100可以显示服务卡片逐渐放大的图标启动动画，再在应用窗口准备好后，过渡到窗口启动动画，完成应用启动过程中的动画显示。

Widget可以看做应用小插件，是一种可供用户制作或自由下载的小工具，包含了娱乐、工作、学习等等多种实用功能。例如，参见图1A，该时间及天气指示符102即为widget。电子设备100可以检测到作用于widget的用户操作，例如点击操作，触发打开该widget对应的应用。

示例性地，当电子设备100检测到用户作用于widget的用户操作，触发启动应用时，电子设备100可以显示widget逐渐放大的图标启动动画，再在应用窗口准备好后，过渡到窗口启动动画，完成应用启动过程中的动画显示。

通知栏用于推送应用的消息，通知栏可以显示在下拉菜单或者锁屏界面等等。电子设备100可以检测到作用于通知栏的用户操作，例如点击操作，触发打开该通知栏对应的应用。

示例性地，当电子设备100检测到用户作用于通知栏的用户操作，触发启动应用时，电子设备100可以显示通知栏逐渐放大的图标启动动画，再在应用窗口准备好后，过渡到窗口启动动画，完成应用启动过程中的动画显示。

多任务界面可用于展示一个或多个应用历史任务，该历史任务可以显示为用户历史打开的应用页面的截图。电子设备100可以检测到作用于多任务界面中的其中一个历史任务的用户操作，例如点击操作，触发打开该截图对应的应用。

示例性地，当电子设备100检测到用户作用于多任务界面中的其中一个应用的历史任务的用户操作，触发启动应用时，电子设备100可以显示截图逐渐放大的图标启动动画，再在应用窗口准备好后，过渡到窗口启动动画，完成应用启动过程中的动画显示。

示例性地，以服务卡片为例，图8A-图8D示出了电子设备100通过服务卡片启动应用时，涉及到的相关用户界面。

如图8A所示，用户界面10可包括：服务卡片104。该服务卡片104用于展示音乐应用中播放的歌曲，并且，电子设备100可以检测到用户作用于该服务卡片104的用户操作，切换播放的歌曲、暂停歌曲的播放或启动歌曲的播放等等。

当电子设备100检测到作用于服务卡片104的用户操作，例如点击操作，响应于该操作，电子设备100触发启动音乐应用，并显示图8A-图8B所示的图标启动动画。

图8B示例性示出了图标启动动画中的一帧图像09，该图像09包括前景层中放大后的服务卡片104以及背景层中的深色背景。该图标启动动画可用于展示服务卡片104的放大过程，以及由形似于服务卡片104的矩形边框逐渐向显示区域所在的矩形边框过渡的过程。

进一步地，在应用窗口准备好后，电子设备100可以显示图8C所示的窗口启动动画中的一帧图像10。

如图8C所示，图像10中可以显示有音乐应用启动后默认显示的页面，例如音乐播放页面的内容。且图像10的大小介于图8B的图像09的大小与图8D所示的用户界面30中显示的音乐播放页面的大小之间。

之后，电子设备100进一步显示窗口启动动画中的下一帧图像，即图8D所示的图像11，该图像11可以为图像10进一步放大后的图像，该图像11可以为音乐应用启动完成时，窗口启动动画中的最后一帧图像。

可以理解的是，电子设备100显示的图标启动动画和窗口启动动画不限于上述图8A-图8D所示的多帧图像，图标启动动画还可以包含更多帧图像，窗口启动动画也可以包含等多帧图像。具体关于图标启动动画和窗口启动动画的详细描述可以参考前述内容，这里不再赘述。

从图8A-图8D可以看出，用户可以通过服务卡片触发打开应用，并显示服务卡片到应用页面的过渡动画。这样，在用户启动应用之后，无需等待较长的时间就可以查看到电子设备100为用户通过服务卡片启动应用的操作所做出的响应，提升用户的视觉体验感。

另外，需要注意的是，当用户通过服务卡片触发打开应用时，电子设备100可以基于该服务卡片生成初始图像，进而生成图标启动动画的多帧图像。其中，若服务卡片可划分为前景层和背景层，则可以创建类似于图3中的(a)所示的图像A的初始图像，通过该初始图像生成图标启动动画，若服务卡片不可划分，则可以创建类似于图3中的(b)所示的图像B的初始图像，通过该初始图像生成图标启动动画，例如图8A-图8B所示的图标启动动画。

可以理解的是，若服务卡片可拆分为前景层和背景层，也可以创建类似于图3中的(b)所示的图像B的初始图像，通过该初始图像生成图标启动动画。另外，关于作用于其他界面元素启动应用，显示图标启动动画的原理类似，这里不在赘述。

电子设备100可以在检测到用户退出应用的操作后，触发退出应用。其中，结合用户发起操作的时机，电子设备100退出应用时可能存在多种场景。

下面结合图9A-图9F介绍不同场景下，电子设备100退出应用时，涉及到的相关用户界面。

图9A-图9F示出了在电子设备100完成应用的启动后，检测到用户退出应用的操作时，显示的相关用户界面。

图9A示出了电子设备100完成应用的启动后，显示的用户界面20。示例性地，该用户界面20可以为游戏中心应用启动后默认显示的主页页面。

如图9A所示，当电子设备100检测到作用于用户界面20的底端向上滑动的操作，响应于该操作，电子设备100可以退出游戏中心应用，并在退出应用的过程中，显示图9A-图9F所示的退出动画。其中，该退出动画可包括窗口退出动画和图标退出动画。示例性地，图9A-图9B中包含窗口退出动画中的图像帧，图9B-图9F中包含图标退出动画中的图像帧。

其中，该窗口退出动画以及图标退出动画中的多帧图像可以为电子设备100启动该游戏中心应用时，显示的图标启动动画和窗口启动动画中反向排列的多帧图像。

结合图1A-图1F可以看出，在电子设备100启动游戏中心应用时，电子设备100按照时间顺序，从图1A所示的应用图标103A，依次显示图像01、图像02、图像03、图像04、图像05。在图9A-图9F所示的用户界面中，当电子设备100退出游戏中心应用时，电子设备100从图9A所示的用户界面20(图像05)，依次显示图像04、图像03、图像02、图像01，到返回显示桌面上的应用图标103A。

从图9A-图9F可以看出，若电子设备100在已完成应用的启动，显示应用的主页页面时，检测到用户退出应用的操作，则电子设备100可以反向显示启动应用时显示的动画中的多帧图像。

在一些实施方式中，电子设备100还可以在显示窗口启动动画的过程中，检测到用户退出应用的操作。这时，电子设备100也可以反向显示当前以显示的启动动画中的多帧图像，完成应用的退出动画的显示。

进一步地，若电子设备100是在显示窗口启动动画的过程中，检测到用户退出应用的操作，则此时的该操作相当于触发打断该窗口启动动画。为了保证电子设备100能够从窗口启动动画平滑过渡到退出动画，电子设备100在检测到用户退出应用的操作后，可以继续向前播放窗口启动动画的几帧图像，然后再切换到退出动画，并且随着时间的推移，继续播放的窗口启动动画的几帧图像的速度可以逐渐减缓。这样，可以避免在用户打断动画之后，存在动画的突变，使动画能够平滑过渡，提升动画的流畅度。

在一些实施方式中，若电子设备100是在显示应用的其他页面时，检测到用户退出应用的操作，即电子设备100在启动应用之后，还检测到用户切换页面的操作，从应用的主页页面切换到其他页面后，再检测到用户退出应用的操作，则响应于该操作，电子设备100可以显示从当前显示页面逐渐缩小至消失，并切换到桌面的退出动画。

进一步地，若电子设备100切换的桌面上显示有该应用的应用图标时，电子设备100除了显示从当前显示页面逐渐缩小至消失的动画外，还可以显示页面缩小过程中逐渐切换到桌面上的该应用图标的图标返回桌面动画。

可选地，电子设备100显示的退出动画中还可以包含跟手动画，即电子设备100显示的退出动画中的前多帧图像还可以跟随用户触发退出应用时的滑动轨迹进行跟手移动。以图9A-图9F所示的退出动画为例，若图9A所示的滑动操作为向左上方滑动，则图9B所示的图像04和图像03可以稍微靠近显示屏的左侧，并且，从整体上看，图9C-图9E所示的图像04-01存在向左跟手移动，再向右朝图9F所示的应用图标103A的位置移动。这样，可以提升用户退出应用时的操作趣味性，提升用户的视觉体验。

图10A-图10D以及图11A-图11D示出了电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作时，涉及到的相关用户界面。

其中，图10A-图10D示出了在电子设备100检测到用户退出应用的操作时，应用窗口准备好的情况下，涉及到的相关用户界面，图11A-图11D示出了在电子设备100检测到用户退出应用的操作时，应用窗口未准备好的情况下，涉及到的相关用户界面。

应理解，图10A-图10D和图11A-图11D都是以电子设备100在显示图标启动动画过程中，显示到图1D所示图像03为例，来描述电子设备100在此时检测到用户退出应用的操作所显示的相关用户界面。在本申请其他实施例中，电子设备100还可以在显示图标启动动画的其他图像帧时，检测到用户退出应用的操作，触发退出应用，并显示退出动画，本申请实施例对此不作限制。

如图10A所示，当电子设备100检测到用户退出应用的操作，例如从用户界面10的底端向上滑动的操作，响应于该操作，电子设备100抑制游戏中心应用的启动，并显示图10A-图10D所示的退出动画。

在内部实现中，当电子设备100检测到用户退出应用的操作，电子设备100可以判断当前应用窗口是否准备就绪。

当应用窗口已准备就绪，则电子设备100可以从图标启动动画中的图像帧，切换为显示应用窗口中的应用内容到图标的返回动画，即在从图10A所示的图像03切换为图10B所示的图像12。该图像12中显示有应用启动页面中的内容，且图像12的大小小于图像03的大小。

进一步地，电子设备100再显示应用启动页面中的内容到应用图标的图标返回桌面动画，即电子设备100可以从图10B所示的图像12切换到图10C所示的图像13，该图像13中既显示有应用启动页面中的内容，又显示有应用图标，并且，相比于图像12，图像13中显示的应用启动页面中的内容的透明度更高，图像13的大小比图像12的大小更小。

进一步地，电子设备100可以从图10C所示的图像13切换为图10D所示的位于桌面上的应用图标103A。

从图10A-图10D可以看出，当电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作，若电子设备100当前已准备好应用窗口，则电子设备100可以切换到显示应用窗口中的内容到应用图标的图标返回桌面的动画。

可选地，电子设备100显示的退出动画中还可以包含跟手动画，即电子设备100显示的退出动画中的前多帧图像还可以跟随用户触发退出应用时的滑动轨迹进行跟手移动。参见图10A，用户退出应用的操作为作用于用户界面10的底端向右上方滑动，在图10A-图10B所述的用户界面10中，从图像03向图像12切换时，还存在向右上方移动的轨迹(参见图10B所示的带箭头的虚线)，之后，电子设备100再显示图10B-图10D所示的从图像12到图像13，再到应用图标103A的移动过程(参见图10C和图10D所示的带箭头的虚线)。

在一些实施方式中，为了保证电子设备100能够从图标启动动画平滑过渡到退出动画，电子设备100在检测到用户退出应用的操作后，还可以继续向前播放启动动画的几帧图像，然后再切换到退出动画，并且随着时间的推移，继续播放的几帧图像的速度可以逐渐减缓。这样，可以避免在用户打断动画之后，存在动画的突变，使动画能够平滑过渡，提升动画的流畅度。下面图11A-图11D所示的场景类似，以下不再赘述。

如图11A所示，当电子设备100检测到用户退出应用的操作，例如从用户界面10的底端向上滑动的操作，响应于该操作，电子设备100抑制游戏中心应用的启动，并显示应用的退出动画。

在内部实现中，当电子设备100检测到用户退出应用的操作，电子设备100可以判断当前应用窗口是否准备就绪。当应用窗口未准备就绪，则电子设备100可以直接反向显示当前已显示的图标启动动画中的多帧图像，显示从当前显示的图像帧逐渐过渡为桌面上应用图标，例如，从当前显示的图11A，依次显示图9D、图9E、图9F。

进一步可选地，电子设备100显示的退出动画中还可以包含跟手动画，即电子设备100显示的退出动画中的前几帧图像还可以跟随用户触发退出应用时的滑动轨迹进行跟手移动。这种情况下，电子设备100显示的退出动画可以参见图11A-图11D所示的用户界面。

具体地，在电子设备100检测到用户退出应用的操作后，电子设备100可以从图11A所示的图像03切换到图11B所示的图像14，且在图像03向图像14切换时，还存在向右上方移动的轨迹(参见图11B所示的带箭头的虚线)。之后，电子设备100再显示图11B-图11D所示的从图像14到图像15，再到应用图标103A的移动过程(参见图11C和图11D所示的带箭头的虚线)。

可见，电子设备100在图11A-图11B所示的用户界面10中显示有图像帧的跟手动画，之后，再显示图11B-图11D所示的图像帧到桌面上的应用图标的图标返回桌面动画。

进一步可选地，在电子设备100显示的退出动画存在跟手动画的前提下，电子设备100可以在跟手动画结束之后，判断应用窗口是否准备就绪。若应用窗口未准备就绪，则电子设备100可以继续显示图11B-图11D所示的图像帧到桌面上的应用图标的图标返回桌面动画。若应用窗口准备就绪，则电子设备100可以切换到应用窗口中的内容到应用图标的图标返回桌面动画。例如，电子设备100在显示图11B的用户界面10后，再显示图10C-图10D所示的用户界面10。

从图11A-图11D可以看出，当电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作，若电子设备100当前未准备好应用窗口，则电子设备100可以直接反向显示当前已显示的图标启动动画中的多帧图像。

可以理解的是，上述图9A-图9F、图10A-图10D、图11A-图11D列举了多种场景下，电子设备100退出应用时显示的退出动画，本申请实施例对电子设备100在不同场景下的退出动画不作限制。

另外，上述图9A-图9F、图10A-图10D、图11A-图11D都是描述的图标能够拆分成前景层和背景层的情况下，图标的前景层和背景层分开缩小的图标退出动画，图标退出动画也可以包括位于前景层的图标逐渐缩小以及位于背景层的新增图片逐渐缩小到消失的动画过程，该动画过程可以为图2A-图2C所示的图标启动动画反向显示的过程。

其中，当图标退出动画包括位于前景层的图标逐渐缩小，以及位于背景层的新增图片逐渐缩小到消失的动画时，该位于背景层的新增图片还可以包括透明度过渡动画，例如跟随图标退出动画的播放，背景层的透明度逐渐升高。这样，用户查看到的图标退出动画可以包括位于前景层的图标逐渐缩小的动画过程，以及背景层缩小并淡出的动画过程。

需要注意的是，将图标退出动画设计为位于前景层的图标逐渐缩小，以及位于背景层的新增图片逐渐缩小至消失的动画过程，可以避免图标退出动画中展示的图标出现纵向拉伸而造成画面失真的问题。

在本申请其他实施例中，电子设备100显示的图标退出动画可以仅包括图标所在的一个图层，并且可以不考虑图标画面失真的问题，直接在检测到用户退出应用的操作后，显示和应用窗口的大小对齐而存在纵向拉伸的图标逐渐缩小为桌面上的图标的图标退出动画。这种情况下，在电子设备100检测到用户退出应用的操作时，电子设备100触发从当前显示的应用窗口逐渐缩小成桌面上的图标大小，并在缩小应用窗口的过程中，在该应用窗口中显示与应用窗口的大小对齐的图标。这样，用户可以查看到存在纵向拉伸的图标逐渐缩小并过渡为桌面上的图标的动画过程，并且不会查看到额外多余的图层。对于异形图标，即图标边界为多边形形状的图标，控制图标拉伸至与窗口对齐所显示的图标退出动画，还可以避免应用退出过程中，边界形状为矩形的应用窗口过渡到边界形状为多边形的图标而出现的画面突变的情况，保证画面的平滑过渡。

进一步地，在一些实施方式中，在电子设备100显示退出动画的过程中，电子设备100还可以检测到用户启动应用的操作，再次启动应用。这时，电子设备100可以打断退出动画，继续显示图标启动动画或窗口启动动画。以图9D为例，若电子设备100在显示退出动画，并在显示到图9D所示的图像02时检测到用户启动应用的操作，例如，作用于图像02的点击操作，响应于该操作，电子设备100从图9D所示的用户界面10，切换到依次显示图1D-图1F所示的用户界面。

进一步可选地，在电子设备100检测到用户打断退出动画的操作时，为了保证退出动画平滑过渡到启动动画，电子设备100可以在检测到用户打算退出动画的操作后，继续向前播放退出动画的几帧图像，然后再切换到启动动画，并且随着时间的推移，继续播放的几帧图像的速度可以逐渐减缓。这样，可以避免在用户打算动画后，存在动画的突变，使动画能够平滑过渡，提升动画的流畅度。

另外，需要注意的是，图9A-图9F、图10A-图10D、图11A-图11D示出的退出动画都是以用户作用于应用图标启动应用时，显示的图标启动动画为例进行描述，在本申请其他实施例中，对应于应用启动时是可以通过服务卡片、widget、通知栏、多任务界面等等界面元素启动应用的情况下，该退出动画可以包括应用窗口的内容过渡到该界面元素的动画，或者，根据该界面元素生成的图标启动动画中的图像帧过渡到该界面元素的动画等等。例如，若电子设备100通过图8A-图8D所示的作用于服务卡片104的用户操作启动音乐应用，若电子设备100在显示到图8C所示的图像10时，检测到用户退出应用的操作，则电子设备100可以依次显示图8C到图8B到图8A所示的用户界面10。

电子设备可以是搭载iOS、Android、Microsoft或者其它操作系统的便携式终端设备，例如手机、平板电脑、可穿戴设备等，还可以是具有触敏表面或触控面板的膝上型计算机(Laptop)、具有触敏表面或触控面板的台式计算机等非便携式终端设备。电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。

图12为本申请实施例提供的电子设备100的软件结构框图。

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

如图12所示，应用程序层可包括桌面启动器(Launcher)。

Launcher通常称之为Android系统的桌面，主要包括以下几种功能：

1)作为Android系统的启动器，可通过Launcher启动应用程序；

2)作为应用程序的管理器，可用于管理应用程序，例如删除或展示应用程序；

3)作为设备的桌面UI，可用于展示应用程序的图标、小部件、更换壁纸等等。

其中，Launcher可包括但不限于窗口动画以及视图(View)动画这两个模块。

窗口动画可用于创建应用启动和应用退出的动画，即前述提及的应用的窗口启动动画和窗口退出动画等动画任务。另外，窗口动画中还包括SurfaceView模块，SurfaceView模块可用于创建用于播放窗口启动动画和窗口退出动画的应用窗口。

View动画可用于创建桌面背景、桌面滑动的动画，以及启动应用时的图标启动动画和图标退出动画等动画任务，并且，View动画可用于创建图标启动动画和图标退出动画中的图标视图。

其中，需要注意的是，窗口动画中创建的动画任务需要先创建窗口，才能够实现在窗口中播放动画，而View动画中创建的动画任务无需创建窗口，通过创建视图，即可实现动画的播放。也就是说，在应用启动时，利用View动画创建图标启动动画，无需等待应用窗口准备就绪，直接通过创建视图，就可以在检测到用户启动应用的操作后，快速响应于该操作，显示图标启动动画。

可以理解的是，窗口动画也可用于创建图标启动动画的动画任务。这种情况下，窗口动画中也可以包括图标启动和图标退出模块。电子设备100可以通过SurfaceView模块创建图标的窗口，通过设置改图标的窗口的属性来生成图标启动动画。这样，电子设备100在绘制图标对应的图标启动动画时，也无需使用应用窗口，也就不许等待应用窗口的创建，可以在检测到用户启动应用的操作后，快速显示该图标启动动画。

需要注意的是，若电子设备100通过窗口动画创建图标启动动画的动画任务时，本身携带有裁剪和圆角属性动画，但是若通过View动画创建图标启动动画的动画任务时，由于七本身不携带裁剪和圆角属性动画，因此需要新增裁剪和圆角属性动画，以便电子设备100能够利用裁剪和圆角属性动画生成图标启动动画中的多帧图像。

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

如图12所示，应用程序框架层可包括活动管理服务(activity manager service，AMS)以及F接口。

其中，AMS主要负责Android系统中四大组件的启动、切换、调度以及应用进程管理和调度工作。在本申请实施例中，AMS还用于在预设场景下抑制应用的启动。示例性地，该预设场景可以是指电子设备100在显示图标启动动画或窗口启动动画的过程中检测到用户退出应用的操作。

窗口动画和View动画都可以通过F接口调用图层合成器(SurfaceFlinger，SF)，通过SurfaceFlinger实现对窗口动画和View动画中创建的动画任务的计算、绘制和渲染等工作。

SurfaceFlinger位于系统运行库层(Native)。

其中，SurfaceFlinger可包括：窗口属性动画、窗口属性弹簧动画、View属性弹簧动画、属性计算以及渲染、图层合成引擎这多个模块。

窗口属性动画用于确定窗口或视图的属性，包括：大小、位置、裁剪、圆角、透明度等等，从而为窗口或视图生成位移动画、缩放动画、裁剪动画以及透明度动画等等。

其中，窗口属性动画可包括：容器动画驱动、更新窗口等模块。

容器动画驱动可用于创建窗口容器动画。该窗口容器动画可以在图标启动动画启动时同步启动，用于保证在切换到窗口启动动画时，窗口启动动画的属性与图标启动动画保持一致，实现应用启动过程中，图标启动动画到窗口启动动画的平滑过渡。

更新窗口可用于在应用启动过程中，当应用窗口准备完成后，将应用窗口更新到容器动画中，从而实现应用窗口中的内容(例如启动页面)的显示，即实现窗口启动动画的显示。

窗口属性弹簧动画可用于确定在电子设备100显示应用的启动动画或退出动画的过程中，动画被用户打断时，动画的弹簧曲线。该弹簧曲线可用于避免动画的突变，保证动画的平滑过渡。

View属性弹簧动画可用于确定在播放视图的启动动画和退出动画(例如，图标启动动画和图标退出动画)的过程中，动画被用户打断时，动画的弹簧曲线。

其中，该弹簧曲线可用于调整和优化启动动画或退出动画中的属性值，包括：缩放(scale)属性中的scaleX和scaleY，位移(translate)属性中的translateX和translateY，裁剪(crop)属性中的crop left、crop top、crop right、crop bottom，透明度(alpha)属性等等。

该弹簧曲线用于实现在电子设备100播放动画的过程中，若检测到用户打断动画的操作，继续维持一段时间该动画的播放，再打断该动画的播放，例如倒放已播放的动画。并且，在维持动画的播放时，随着时间的推移，该维持播放的动画的播放速度可以逐渐减缓，在倒放已播放的动画时，随着时间的推移，该倒放的动画的播放速度可以逐渐加快。

为了便于理解，以应用启动时的场景举例来说，在电子设备100检测到用户启动应用的操作后，电子设备100响应于该操作开始播放图标启动动画，即显示图标逐渐放大的动画，若在电子设备100播放图标启动动画的过程中检测到用户退出应用的操作，则电子设备100可以继续播放图标启动动画的几帧图像，再显示图标退出动画，即显示图标逐渐缩小的动画。且随着时间的推移，继续播放的几帧图像播放速度逐渐减缓，图标退出动画的播放速度逐渐加快。

示例性地，图13示例性示出了本申请实施例提供的弹簧曲线的示意图。

如图13所示，曲线1为不存在用户打断操作的原始曲线，曲线2为存在用户打断操作的情况下，一些动画打断机制中的动画曲线，曲线3为本申请提供的打断机制中的弹簧曲线。

其中，若电子设备100播放动画的过程中，不存在用户的打断操作，则可以按照曲线1播放该动画，即跟随时间的推移逐渐完成该动画的播放。

在一些动画打断机制中，若电子设备100播放动画的过程中，检测到用户的打断操作(参见图13指示的打断点)，则电子设备100按照曲线2播放该动画，即在打断点立即打断动画的播放，并倒放已播放的动画。

在本申请实施例提供的打断机制中，若电子设备100播放动画的过程中，检测到用户的打断操作(参见图13指示的打断点)，则电子设备100按照曲线3播放该动画，即在打断点之后的一段时间内，继续按照电子设备100向前播放动画的趋势，播放动画，超过该时间后再倒放已播放的动画。

从图13所示的弹簧曲线可以看出，本申请实施例提供的打断机制使得用户触发打断动画后，该动画不会立即发生突变，使动画能够平滑过渡，提升动画的流畅度。

可以理解的是，图13所示的弹簧曲线只是示例性描述，不构成对本申请实施例的限制。

属性计算模块可用于计算窗口和视图的动画属性值，即前述提及的缩放(scale)属性中的scaleX和scaleY，位移(translate)属性中的translateX和translateY，裁剪(crop)属性中的crop left、crop top、crop right、crop bottom，透明度(alpha)属性等等。

渲染模块可用于绘制并渲染得到动画中的每一帧图像的各个图层。其中，该动画可以是指图标启动动画、窗口启动动画、图标退出动画、窗口退出动画等等。

图层合成引擎可用于对渲染后的每一帧图像对应的各图层进行图层合成，得到待显示的动画的每一帧图像，并对每一帧图像进行缓存。

内核层是硬件和软件之间的层。内核层可包括显示驱动。

显示驱动可用于驱动显示屏显示动画中的每一帧图像。

可以理解的是，EA引擎中包含的窗口属性动画、窗口属性弹簧动画、View属性弹簧动画、属性计算以及渲染这多个模块也可以位于渲染线程(RenderThread)中。其中，RenderThread可同时位于应用程序框架层和系统运行库中。也就是说，图标启动动画和窗口启动动画的绘制可以由RenderThread实现，也可以由SurfaceFlinger实现。

优选地，图标启动动画和窗口启动动画的绘制由SurfaceFlinger实现。这样，在经过渲染模块得到每一帧图像的各个图层之后，无需经过跨进层通信，就可以使用同样位于SurfaceFlinger中的图层合成引擎来对每一帧图像的各图层进行图层合成，可以减少丢帧率，进一步优化应用启动时点击响应的时延。

下面结合图1A-图1F所示的应用启动过程，示例性说明电子设备100的软件结构框图中涉及的工作流程。

当电子设备100检测到用户作用于应用图标的启动操作时，响应于该操作，电子设备100可以通过View动画创建图标视图的动画任务，并通过F接口调用SurfaceFlinger，通过SurfaceFlinger中的窗口属性动画生成图标视图的属性动画，并通过属性计算模块确定属性动画中图标视图在每一帧图像上的动画属性值，之后再通过渲染模块渲染得到每一帧图像的各个图层，然后再通过图层合成引擎对渲染后的每一帧图像对应的各图层进行合成，得到待显示的图标启动动画的每一帧图像，并通过显示驱动模块驱动显示屏显示每一帧图像。

并且，在电子设备100检测到用户作用于应用图标的启动操作之后，电子设备100还可以通过窗口动画创建应用窗口的动画任务，并通过F接口调用SurfaceFlinger，通过SurfaceFlinger中的窗口属性动画生成应用窗口的属性动画，且应用窗口的属性动画中的动画属性值与图标视图的动画属性值保持一致，之后再通过类似于图标启动动画中渲染图像的描述，得到应用启动动画的每一帧图像，并通过显示驱动模块驱动显示屏显示每一帧图像。

需要注意的是，由于View动画创建的图标视图的动画任务，不需要创建窗口就可以快速播放图标视图对应的图标启动动画，因此，在电子设备100检测到用户作用于应用图标的启动操作后，电子设备100可以快速响应于该操作，开始播放图标启动动画。

并且在图标启动动画启动时，可以同步启动SurfaceFlinger中的容器动画驱动创建的窗口容器动画，以便应用窗口准备就绪后更新到该窗口容器动画中。

在一些实施方式中，在应用窗口准备就绪后，将应用窗口更新到该窗口容器动画中，可以是指将应用窗口设置为该窗口容器动画作用的对象。

可以理解的是，在本申请其他实施例中，除了将应用窗口更新到窗口容器动画外，也可以通过创建该应用窗口的应用窗口动画，将窗口容器动画的动画属性值赋值给应用窗口动画，来实现应用窗口的启动动画与图标启动动画保持一致。

而由于窗口动画创建的是应用窗口的动画任务，需要等待应用窗口创建完成后才能在应用窗口中绘制图像，进而实现窗口启动动画的播放。之后，若应用窗口准备就绪，则通过更新窗口模块将应用窗口加入窗口容器动画中，实现应用窗口的显示，并且播放应用窗口的窗口启动动画，且当前播放的窗口启动动画的动画属性值与同时刻的图标启动动画的动画属性值保持一致，实现图标启动动画到窗口启动动画的平滑过渡。

从图12可以看出，图标启动动画由launcher侧控制，避免了跨进程开销，图标启动动画的绘制不受应用窗口的限制，图标启动动画无需等在应用窗口绘制完成后才能播放，保证了电子设备100能在检测到用户启动应用的操作之后，快速显示图标启动动画。并且在绘制图标启动动画中的图像帧时，由SurfaceFlinger进行接管，解除了对AT方案的依赖，扩大了场景化的范围。

图14为本申请实施例提供的电子设备100在应用启动时显示启动动画的内部模块交互图。

其中，电子设备100在应用启动时显示启动动画主要涉及到UI线程、应用程序框架层(Framework)、图层合成器(SurfaceFlinger)之间的交互。

UI线程，也叫做主线程，为应用启动时，由系统创建的线程。其中，UI线程负责向UI组件分发事件(例如绘制事件)。Framework由多个系统服务组成，Framework用于在应用中的组件与组件之间进行通信时，提供服务集中调度和传递消息。SurfaceFlinger用于实现对动画的计算、绘制以及渲染等工作。

如图14所示，在应用启动时，主要涉及到的内部实现包括：

S11.UI线程检测到启动应用的用户操作。

其中，该用户操作可以包括作用于应用图标、服务卡片、widget、通知栏、多任务界面等等界面元素的用户操作，例如点击操作。

S12.UI线程调用Startactivity()方法。

StartActivity()方法可用于启动新的Activity，进而实现对应用的启动。

S13.UI线程初始化动画内容。

S14.UI线程创建图标图层。

该图标图层为图标视图所在的图层。电子设备100可以在该图标图层中显示图标启动动画。并且，该图标图层位于应用窗口层的下方。这样，在电子设备100准备好应用窗口，开始播放窗口启动动画时，可以在图标启动动画的图层上，实现图标启动动画到窗口启动动画的切换显示。

S15.UI线程通过SurfaceFlinger创建图标启动动画。

该图标启动动画可用于展现图标逐渐放大的过程。具体关于图标启动动画的创建过程可以参见前述图12中的相关内容，这里不再赘述。

S16.UI线程通过SurfaceFlinger启动图标启动动画。

S17.UI线程通过SurfaceFlinger创建窗口容器动画。

该窗口容器动画用于保证在应用窗口准备就绪后，播放的窗口启动动画的动画属性能够与图标启动动画的动画属性保持一致。具体关于该窗口容器动画的描述可以参见前述图12中的相关内容，这里不再赘述。

S18.UI线程通过SurfaceFlinger启动窗口容器动画。

可以理解的是，除了S16在S15之后执行，S18在S17之后执行之外，本申请实施例对步骤S15-S18顺序不作限制。例如，电子设备100可以先执行S15-S16，再执行S17-S18，或者，电子设备100也可以先执行S17-S18，后执行S15-S16，或者，电子设备100也可以同时先执行S15、S17，在同时执行S16、S18。

S19.UI线程向Framework请求应用的窗口启动动画。

该窗口启动动画可用于展示应用启动时，应用的页面内容逐渐放大的过程。其中，窗口启动动画需要在应用窗口准备就绪后才能展现在用户界面中。具体关于窗口启动动画的创建过程可以参见前述图12中的相关内容，这里不再赘述。

S20.Framework通知UI线程应用窗口准备就绪。

其中，电子设备100可以在检测到启动应用的用户操作后，开始准备应用窗口。

S21.UI线程通过SurfaceFlinger将应用窗口更新至窗口容器动画中，并启动窗口启动动画。

将应用窗口更新至窗口容器动画，即可跟随图标启动动画的动画属性，来播放窗口启动动画，实现图标启动动画到窗口启动动画的过渡。

可选地，在启动窗口启动动画时，窗口启动动画的前几帧图像可以存在透明度动画，即窗口启动动画的前几帧图像存在透明度逐渐降低的变化过程。这样，可以实现图标启动动画到窗口启动动画的平滑过渡。

可以看出，本申请实施例涉及的应用启动过程中，在用户启动应用时，电子设备100可以启动窗口容器动画和图标启动动画，在应用窗口准备好之后，再将应用窗口更新到窗口容器动画中，启动窗口启动动画。

图15示出了本申请实施例提供的应用启动方式与一种应用启动方式的时序对比图。

如图15所示，时间轴1示出了一种应用启动方式的时序图，时间轴2示出了本申请实施例提供的应用启动方式的时序图。

在时间轴1中，在用户启动应用之后，需要先准备应用窗口，在应用窗口准备好之后，再启动窗口动画，之后在Startingwindow绘制完成或者应用的启动页面或第一帧绘制完成后，窗口可见，完成应用启动。

在时间轴2中，在应用启动应用时，可以启动窗口容器动画以及图标启动动画，并准备应用窗口，在应用窗口准备好之后，再将应用窗口更新到窗口容器动画中，之后在Startingwindow绘制完成或者应用的启动页面或第一帧绘制完成后，窗口可见，完成应用启动。

对比时间轴1和时间轴2可以看出，在用户启动应用后，时间轴2上可以快速启动图标启动动画，将用户启动应用后触发的动画展现给用户，而在时间轴1上由于需要等待应用窗口准备就绪，因此需要等待较长时间，才能将用户启动应用后触发的动画展现给用户。可见，本申请实施例涉及的应用启动方式能够让用户在启动应用之后，无需等待较长时间就可以快速查看到应用启动过程中涉及到的动画，给用户一种“点击即响应”的视觉体验。

图16为本申请实施例提供的电子设备100在应用启动过程被用户打断后显示退出动画的内部模块交互图。

其中，电子设备100在应用启动过程被用户打断后显示退出动画主要涉及到UI线程、Framework、SurfaceFlinger之间的交互。具体关于UI线程、Framework、SurfaceFlinger的定义可以参见前述图14中的相关内容，这里不再赘述。

如图16所示，在应用启动过程被用户打断后，主要涉及到的内部实现包括：

S31.UI线程通过SurfaceFlinger启动图标启动动画。

其中，UI线程可以在检测到用户启动应用的用户操作后，通过SurfaceFlinger启动图标启动动画。具体关于电子设备100启动图标启动动画的内部实现可以参见前述步骤S11-S16的描述，这里不再赘述。

S32.UI线程检测到退出应用的操作。

其中，该用户操作可以包括作用于图标启动动画的用户操作，例如点击操作、滑动操作。

S33.UI线程判断应用窗口是否准备就绪。

其中，电子设备100可以在检测到启动应用的用户操作后，开始准备应用窗口。具体地，UI线程可以在检测到退出应用的操作之后，触发判断应用窗口是否准备就绪。

若应用窗口准备就绪，则执行步骤S34，启动应用窗口到图标的退出动画，否则，执行步骤S35，创建图标跟手动画。

S34.UI线程启动应用窗口到图标的退出动画。

若应用窗口准备就绪，则UI线程启动应用窗口到图标的退出动画。该退出动画用于展示应用窗口逐渐缩小，到过渡为图标并逐渐缩小的过程。

也就是说，在应用启动并显示图标启动动画的过程中，当电子设备100检测到用户退出应用的用户操作，若当前应用窗口已准备就绪，则电子设备100从当前显示的图标启动动画切换为应用窗口到图标的退出动画。

可选地，若该退出应用的操作包括滑动操作，则该退出动画还可以包括跟手动画，该跟手动画用于展示在退出动画的前几帧图像中，应用窗口或图标逐渐缩小过程中，应用窗口跟随滑动操作的滑动轨迹进行移动的过程。

示例性地，参见图10A-图10D，图10A示出了电子设备100在显示图标启动动画时检测到的退出应用的滑动操作，图10B-图10D示出了应用窗口到图标的退出动画，其中，图10B示出了应用窗口跟随滑动操作的滑动轨迹进行移动的跟手动画。

S35.UI线程通过SurfaceFlinger创建图标退出动画。

若应用窗口未准备就绪，则UI线程通过SurfaceFlinger创建图标退出动画，即显示应用图标逐渐缩小的过程。该图标退出动画中包含的各帧图像可以为倒放的图标启动动画中的各帧图像。

也就是说，在应用启动并显示图标启动动画的过程中，当电子设备100检测到用户退出应用的用户操作，若当前应用窗口未准备就绪，电子设备100可以倒放图标启动动画，显示图标逐渐缩小的退出动画。

可以理解的是，电子设备100在检测到退出应用的操作后，也可以执行创建并启动图标退出动画，无需判断应用窗口是否准备就绪。也就是说，步骤S33为可选的步骤。

进一步地，该图标退出动画可包括跟手动画。也就是说，在退出应用的操作为滑动操作的情况下，在电子设备100显示图标逐渐缩小的过程中，该图标的移动轨迹还会跟随用户的滑动方向进行移动。

也就是说，在应用启动并显示图标启动动画的过程中，当电子设备100检测到用户退出应用的用户操作，若当前应用窗口未准备就绪，电子设备100可以显示图标根据用户的滑动操作移动并逐渐缩小的过程。

S36.UI线程通过SurfaceFlinger启动图标退出动画。

S37.UI线程判断应用窗口是否准备就绪。

在电子设备100启动图标退出动画之后，即在显示图标退出动画的过程中，电子设备100可以持续执行或周期性执行步骤S37，判断应用窗口是否准备就绪。

若应用窗口准备就绪，则执行步骤S34，启动应用窗口到图标的退出动画，否则，电子设备100继续播放图标退出动画，直到图标退出动画播放完毕，执行步骤S38。

也就是说，在电子设备100显示图标退出动画的过程中，若应用窗口准备就绪，则电子设备100可以从当前的图标退出动画切换到应用窗口到图标的退出动画。

在一些实施方式中，若图标退出动画包括跟手动画，电子设备100可以在跟手动画结束后触发判断应用窗口是否准备就绪，若应用窗口准备就绪，则电子设备100切换到应用窗口到图标的退出动画，若应用窗口未准备就绪，则电子设备100显示图标返回桌面动画，即显示应用图标逐渐缩小到返回桌面的过程。

示例性地，参见图11A、图11B、图10C、图10D，图11A示出了电子设备100在显示图标启动动画时检测到退出应用的滑动操作，图11A-图11B示出了图标跟手动画，图10C-图10D示出了应用窗口到图标的退出动画。

示例性地，参见图11A-图11D，图11A示出了电子设备100在显示图标启动动画是检测到退出应用的滑动操作，图11A-图11B示出了图标跟手动画，图11C-图11D示出了图标返回桌面动画。

另外，可以理解的是，步骤S37为可选的步骤，在电子设备100启动图标退出动画后，可以无需判断应用窗口是否准备就绪，直接播放该图标退出动画，直到图标退出动画结束，完成应用的退出。

S38.SurfaceFlinger通知UI线程退出动画结束。

S39.UI线程通过Framework抑制应用启动。

示例性地，UI线程可以通过Framework中的AMS抑制应用启动。

可以看出，在本申请实施例涉及的应用退出过程中，根据应用窗口是否准备就绪可以存在不同的退出动画，为用户提供丰富的视觉体验。

图17为本申请实施例提供的显示方法的流程示意图。

如图17所示，该方法可包括：

S401.电子设备100检测到作用于第一界面元素的用户操作，该用户操作用于启动第一应用。

其中，第一界面元素可以是指第一应用的应用图标、服务卡片、widget、通知栏、多任务界面中的历史任务等等界面元素。用户可以通过作用于该第一界面元素的用户操作，启动第一应用。

该用户操作可以包括作用于该第一界面元素的点击操作、滑动操作等等，本申请实施例对该第一操作的操作方式不作限制。

示例性地，该第一界面元素可以是指图1A所示的应用图标103A，该用户操作可以是指图1A所示的作用于应用图标103A的点击操作。

示例性地，该第一界面元素还可以是指图8A所示的服务卡片104，该用户操作可以是指作用于该服务卡片104的点击操作。

示例性地，在电子设备100检测到作用于第一界面元素的用户操作之前，电子设备100的后台中并没有该第一应用的进程。这样，在电子设备100响应于该用户操作，启动第一应用的过程中，需要创建新的进程分配给该第一应用，准备应用窗口，电子设备100需要等待应用窗口准备就绪，才能显示该应用窗口对应的窗口启动动画。

S402.电子设备100判断第一界面元素是否为分层图标。

若电子设备100可以从第一界面元素中划分出多个图层，则第一界面元素为分层图标，否则，第一界面元素为非分层图标。

当第一界面元素为分层图像，第一界面元素可以包括前景层和背景层。

示例性的，第一界面元素可以包括多个图层，可以从这多个图层中划分出前景层和背景层。

示例性地，以第一界面元素为图1A中的游戏中心应用的应用图标为例，参见图3中的(a)，第一界面元素的前景层可以为应用图标中的“游戏手柄”元素，第一界面元素的背景层可以为应用图标中的矩形背景。

其中，当第一界面元素为分层图标，则电子设备100执行步骤S403，否则，电子设备100执行步骤S404。

示例性地，第一界面元素是否为分层图标可以由开发设计该第一界面元素的设计师决定。

可以理解的是，若第一界面元素为分层图标，电子设备100也可以执行步骤S404，本申请实施例对此不作限制。

S403.电子设备100生成第一图像，第一图像的前景层为放大第一比例的第一界面元素的前景层，第一图像的背景层根据放大第二比例的第一界面元素的背景层确定，第一图像的大小与第一应用启动完成后显示的图像的大小相同。

该第一图像用于生成应用启动过程中显示的图标启动动画中的各帧图像。示例性地，以第一界面元素为图1A所示的应用图标103A为例，该第一图像可以是指图3中的(a)所示的图像A。

在内部实现中，电子设备100可以先根据第一界面元素生成第一图像，然后通过设置该第一图像的不同动画属性，来生成该图标启动动画中的各帧图像。其中，该动画属性可以包括：缩放、位移、裁剪、透明度、圆角等等。

其中，第一比例可以不同于第二比例。这样，第一图像为根据第一界面元素中放大不同比例的前景层和背景层确定。该第一比例和第二比例可以由开发人员设置，并预置在电子设备100中。开发人员可以自行根据第一图像中画面的视觉效果来配置该第一比例和第二比例。

在利用第一界面元素的背景层确定第一图像的背景层的过程中，除了使用第二比例对第一界面元素的背景层进行放大之外，还包括对放大后的背景层进行裁剪，从而得到第一图像的背景层。并且，放大后的第一界面元素的背景层的大小需要超出裁剪的区域范围。其中，裁剪的区域大小可以为第一应用启动完成后显示的图像的大小。这是由于第一界面元素的背景层在放大之后可能与第一图像的背景层的形状不符，所以需要对放大后的第一界面元素的背景层进行裁剪。例如，在将图1A所示的应用图标103A放大为图3中的(a)所示的图像A时，应用图标103A的背景层为圆角矩形，图像A的背景层为非圆角的矩形。可见，在对应用图标103A的背景层进行放大后，还需要对其进行裁剪才能得到第一图像的背景层。

另外，值得注意的是，在对第一界面元素的背景层进行放大时，第二比例可以存在以下两种情况：

1)第二比例可以包括X轴和Y轴上的不同放大比例

这种情况下，在对第一界面元素的背景层进行放大时，X轴和Y轴上的放大比例不同。

以图1A中的应用图标103A放大得到图3中的(a)所示的图像A为例，由于应用图标103A的背景层为宽高相等的矩形，而图像A为高度大于宽度的矩形，那么在对第一界面元素的背景层进行放大时，Y轴上的放大比例可以大于X轴上的放大比例。

可以看出，这种情况适用于第一界面元素的背景层为纯色背景。这是由于在对第一界面元素的背景层进行放大时，即使横向和纵向放大比例不同，造成第一界面元素的背景层横向或纵向拉伸，也不会出现画面失真的问题。

2)第二比例可以仅包括一个放大比例

这种情况下，在对第一界面元素的背景层进行放大时，X轴和Y轴上的放大比例相同。

以图1A中的应用图标103A放大得到图3中的(a)所示的图像A为例，由于应用图标103A的背景层为宽高相等的矩形，若应用图标103A按照等比例放大，则应用图标103A的背景层放大后仍宽高相等的矩形，之后，可以通过裁剪来获得第一图像的背景层。

可以看出，这种情况适用于第一界面元素的背景层为非纯色背景。这样可以对第一界面元素的背景层进行等比例放大，避免第一界面元素的背景层出现横向或纵向拉伸，造成画面失真的问题。

S404.电子设备100生成第一图像，第一图像的前景层为放大第三比例的第一界面元素，第一图像的背景层为第一图片，第一图像的大小与第一应用启动完成后显示的图像的大小相同。

该第一图像用于生成应用启动过程中显示的图标启动动画的各帧图像。示例性地，以第一界面元素为图1A所示的应用图标103A为例，该第一图像可以是指图3中的(b)所示的图像B。

在内部实现中，电子设备100可以先根据第一界面元素生成第一图像，然后通过设置该第一图像的不同动画属性，来生成该图标启动动画中的各帧图像。其中，该动画属性可以包括：缩放、位移、裁剪、透明度、圆角等等。

其中，该第三比例可以由开发人员设置，并预置在电子设备100中。开发人员可以自行根据第一图像中画面的视觉效果来配置该第三比例。

示例性地，该第一图片可以存在以下多种情况：

1、该第一图片为第一颜色的纯色背景。

这种情况下，可以通过以下任意一种方式确定该第一颜色：

1)第一颜色为预置的颜色

例如，该颜色为白色、黄色、黑色等等。

2)第一颜色为第一界面元素中某个区域的主色

这种情况下，第一颜色为第一界面元素中包含的一个颜色。例如，若第一界面元素的中心区域以红色为主色，则该第一颜色为红色。

3)第一颜色为第一界面元素中的某个区域主色*系数

示例性地，该系数可以是指RGB系统。

这种情况下，第一颜色为根据第一界面元素中包含的颜色确定。例如，若第一界面元素的中心区域以红色为主色，则该第一颜色为淡红色。又例如，若第一界面元素的中心区域以蓝色为主色，则该第一颜色为深蓝色。

可以理解的是，电子设备100还可以依据其他方式确定该第一颜色，本申请实施例对此不作限制。

2、该第一图片为渐变背景

示例性地，该第一图片为从第二颜色到第三颜色过渡的渐变背景图。

这种情况下，该渐变背景使用的颜色可以是指：

1)预置的颜色

也就是说，在电子设备100生成该第一图片时，可以利用该预置的颜色来生成第一图片。

2)根据第一界面元素中提取的颜色确定的颜色

其中，该颜色可以是指第一界面元素中提取的颜色，也可以是指对第一界面元素中提取的颜色进行修正后的颜色。

也就是说，在电子设备100生成该第一图片时，可以利用从第一界面元素中提取的颜色来生成第一图片。

3)随机生成的颜色

也就是说，在电子设备100生成该第一图片时，可以利用随机生成的颜色来生成第一图片。

可以理解的是，电子设备100可以结合预置的颜色、从第一界面元素中提取的颜色以及随机生成的颜色中的任意一种或两种方式来确定渐变背景所使用的两种颜色。

其中，若第一图片使用到的两种颜色都是根据第一界面元素中提取的颜色确定，具体关于电子设备100确定该第一图像的详细描述可以参见后续图18-图24的内容，这里先不展开。

另外，在本申请其他实施例中，该第一图片的颜色可以包括从左到右的两种不同颜色的渐变，或者包括从内到外的两种不同颜色的渐变，或者，包括从左到右的三种不同颜色的渐变。本申请实施例对该第一图片的渐变方向，渐变颜色的数量等渐变参数不作限制。

S405.电子设备100根据第一图像生成图标启动动画，该图标启动动画用于展示从第一界面元素向第一图像的放大过程。

在本申请实施例中，该图标启动动画还可以被称为第一启动动画。

该图标启动动画为属性动画，电子设备100可以通过设置第一图像的动画属性值，来确定图标启动动画的每一帧图像。

其中，根据第一界面元素是否为分层图标，该图标启动动画可以存在以下两种情况：

1)若第一界面元素为分层图标，该图标启动动画可包括：第一界面元素的前景层向第一图像的前景层的放大过程，以及第一界面元素中的背景层向第一图像中的背景层的放大过程。

2)若第一界面元素为非分层图标，该图标启动动画可包括：第一界面元素到第一图像中前景层的放大过程，以及第一图片的出现和放大过程。

以第一界面元素为分层图标为例，若第一界面元素为图1A所示的应用图标103A，图标启动动画中涉及到的多帧图像可以参见图6。电子设备100对图标启动动画中的其中一帧图像的生成原理可以参见图7。

并且，该第一图像存在以下两种情况：

1)第一图像为launcher中的View动画创建的图标视图

2)第一图像为launcher中的SurfaceView创建的图标窗口中绘制的图像

其中，无论是情况1还是情况2，电子设备100在启动应用时，都无需等待应用窗口的创建，即可在检测到用户作用于第一界面元素的用户操作后，快速启动第一图像对应的图标启动动画。具体关于launcher和View动画、SurfaceView的描述可以参见前述图12的相关描述，这里不再赘述。

S406.电子设备100显示图标启动动画。

示例性地，若第一图像采用S403所示的方式生成，以第一界面元素为图1A所示的应用图标103A为例，电子设备100显示的图标启动动画可以包括图1A-图1D示出的从应用图标103A到图像01到图像02到图像03的变化过程。

示例性地，若第一图像采用S404所示的方式生成，以第一界面元素为图1A所示的应用图标103A为例，电子设备100显示的图标启动动画可以包括图1A、图2A-图2C示出的从应用图标103A到图像06到图像07到图像08的变化过程。

另外，值得一提的是，该图标启动动画由系统创建，不是第一应用提供的内容。可见，本申请实施例提供的显示方法通过在显示应用提供的应用窗口之前，由系统新增图标启动动画来填补应用窗口准备就绪之前的空缺，可以避免用户等待较长时间才能查看到应用启动所作出的响应，从视觉上加快应用启动的速度。

S407.当应用窗口绘制完成，电子设备100显示窗口启动动画，其中，显示窗口启动动画，包括：应用窗口中显示的内容逐渐增多且显示内容的尺寸逐渐变大。

该应用窗口为第一应用的窗口，电子设备100可以在检测到用户作用于第一界面元素的用户操作之后，开始绘制该应用窗口。该应用窗口用于承载应用内容的显示。在应用启动时，该应用窗口承载的应用内容可以是指应用的启动页面，包括但不限于以下一项或多项：应用提前缓存的图像、应用启动时默认显示的主页面、应用提前预置的启动动画等等。

当应用窗口绘制完成，电子设备100可以显示第一应用的窗口启动动画。

具体地，窗口启动动画用于展示从第一大小的应用窗口到第二大小的应用窗口的放大过程，第一大小大于或等于第一图像帧的大小，第二大小为第一应用启动完成后显示的图像大小。其中，第一图像帧为应用窗口绘制完成时，图标启动动画显示的图像帧。

在窗口启动动画结束后，应用窗口中可以显示有第一应用的第一页面。示例性地，该第一页面可以是指图1F所示的主页页面。

类似于电子设备100生成图标启动动画的过程，窗口启动动画的生成过程也可以包括：先生成应用启动完成后显示的图像，再通过设置该图像的动画属性，生成窗口启动动画的多帧图像。示例性地，电子设备100生成的窗口启动动画中的多帧图像可以参见前述图6。

并且，窗口启动动画所在的图层位于图标启动动画的图层之上。这样，在电子设备100显示窗口启动动画时，可以遮挡住位于下层的图标启动动画，实现从图标启动动画过渡到窗口启动动画。

示例性地，电子设备100显示的窗口启动动画可以包括图1E-图1F示出的从图标04到图像05的变化过程。

可选地，在电子设备100开始显示窗口启动动画时，窗口启动动画的前几帧图像可以存在透明度逐渐降低的过渡过程。这样，可以从视觉上展现出图标启动动画淡出，窗口启动动画淡入的平滑过渡效果。

并且，窗口启动动画的属性可以与图标启动动画的属性保持一致。这样，在电子设备100从图标启动动画切换到窗口启动动画时，窗口启动动画中应用窗口的放大过程可以维持图标启动动画中图标的放大趋势继续变化。

在内部实现中，电子设备100可以在启动图标启动动画时启动窗口容器动画，若应用窗口准备就绪，则将该应用窗口更新至窗口容器动画中，从而保证应用窗口的属性动画，即窗口启动动画与图标启动动画保持一致。

总的来说，在电子设备100检测到用户作用于第一界面元素的用户操作之后，电子设备100可以在显示第一界面元素逐渐放大的动画的过程中，等待应用窗口绘制完成，然后过渡到应用窗口的窗口启动动画，这样可以避免应用启动过程中出现启动动画消失，或者用户等待较长时间才得到响应的问题。

在一些实施方式中，电子设备100还可以在显示启动动画的过程中，或完成启动动画的显示后，检测到用户退出第一应用的操作，显示第一应用的退出动画。该退出动画用于展示从应用的相关内容返回到桌面的过程。

针对用户操作的作用的不同时机，存在以下多种场景：

场景1：电子设备100在显示第一应用提供的应用窗口中的内容时，检测到用户退出应用的操作

在该场景下，当电子设备100检测到用户退出应用的操作时，电子设备100正处于显示窗口启动动画的过程中，或者已完成启动动画的显示，正在显示应用页面。该应用页面可以为应用启动完成后显示的第一个应用页面，也可以为接收到用户切换页面的操作之后，显示的其他应用页面。

示例性地，响应于该退出应用的操作，电子设备100显示的退出动画可以存在以下任意一种情况：

1)按照启动应用时已显示的动画反向显示

也就是说，电子设备100可以按照用户启动应用时按顺序依次显示的图标启动动画和窗口启动动画中的各帧图像，依次反向显示这多帧图像。

其中，若用户发起退出应用的操作时应用启动已完成，该退出动画可用于展示第二大小的应用窗口到第一大小的应用窗口的缩小过程，以及图标启动动画中的第一图像帧到应用图标的缩小过程。

例如，参见图9A-图9F，第二大小的应用窗口到第一大小的应用窗口的缩小过程可以是指图9A-图9F所示的图像05到图像04的切换过程，图标启动动画中的第一图像帧到应用图标的缩小过程可以是指图9C-图9F所示的图像03到图像02到图像01到应用图标103A的切换过程。

这样，电子设备100可以直接利用启动应用时缓存的启动动画的图像帧来显示退出动画，减少电子设备100的计算量。

2)显示当前显示内容逐渐缩小至消失的动画

这种情况下，电子设备100可以在检测到用户退出应用的操作后，逐渐缩小当前显示的应用的显示内容，并返回到桌面。

场景2：电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作

场景2-1：当前电子设备100已准备好应用窗口

若电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作，且电子设备100当前已准备好应用窗口，则响应于该操作，电子设备100可以显示应用窗口中的显示内容到第一界面元素的缩小动画。

示例性地，该退出动画可以参见图10A-图10D所示的从图像02到图像12到图像13到应用图标103A的切换过程。

场景2-2：当前电子设备100未准备好应用窗口

若电子设备100在显示图标启动动画的过程中，检测到用户退出应用的操作，且电子设备100当前未准备好应用窗口，则响应于该操作，电子设备100可以显示检测到退出应用的操作时显示的图像帧到第一界面元素的缩小动画。

示例性地，该退出动画可以参见图11A-图11D所示的从图像03到图像14到图像15到应用图标103A的切换过程。

进一步地，在场景1和场景2中，电子设备100显示的退出动画还可以包括跟手动画，也就是说，退出动画中显示的前几帧图像还可以跟随用户的滑动轨迹进行移动。

进一步地，在场景2-2中，若应用窗口在电子设备100显示完跟手动画后准备就绪，则电子设备100可以切换到应用窗口中的内容到第一界面元素的缩小动画。

示例性地，该退出动画可以参见图11A、图11B、图10C、图10D所示的从图像03到图像14到图像13到应用图标103A的切换过程。

在一些实施方式中，电子设备100还可以在显示退出动画的过程中，检测到用户再次启动第一应用的操作，继续在当前显示的图像帧的基础上，显示启动动画。

示例性地，假设电子设备100在显示图9D所示的图像02时检测到用户再次启动第一应用的操作，电子设备100可以继续显示从图9D所示的图像02到图9C所示的图像03到图9B所示的图像04到图9A所示图像05的切换过程。

在一些实施例中，电子设备100除了根据第一界面元素是否为分层图标来生成第一图像之外，还可以结合第一界面元素中提取的颜色来生成第一图像。

示例性地，电子设备100可以根据第一界面元素中提取的颜色来设置第一图像的背景层，将第一图像的背景层设置为渐变背景。例如，电子设备100可以通过提取第一界面元素的上端点和下端点的颜色，利用这两个端点的颜色设置从上端点的颜色到下端点的颜色过渡的渐变背景。也就是说，对于分层图标，电子设备100可以利用第一界面元素的前景层来设置第一图像的前景层，而第一图像的背景层为通过第一界面元素上提取的颜色生成的渐变背景。这样，对于第一界面元素的背景层的图案较为复杂的图标，电子设备100无需使用该图案复杂的背景来生成第一图像的背景层，造成图标启动动画的图像帧背景层过于花哨，提高画面的整洁美观程度。另外，对于非分层图标，电子设备100可以利用该第一界面元素来设置第一图像的前景层，而相比于使用纯色图片作为第一图像的背景层，使用渐变图片作为第一图像的背景层，又可以提高画面的丰富度，提升图标启动动画的视觉效果。

下面以一个具体的实施例，来描述电子设备100利用第一界面元素中的颜色来生成第一图像的详细过程。

图18为本申请实施例提供的利用第一界面元素的颜色生成第一图像的流程示意图。

S501.电子设备100获取第一界面元素中四个端点的颜色。

其中，电子设备100可以根据第一界面元素的四个端点的颜色来设置第一图像的背景层。

该第一界面元素中的颜色可以通过HSB色值，或RGB值来表示，其中，HSB色值包括Hue(色相)、Saturation(饱和度)、Brightness(亮度)这三个参数，RGB值包括Red(红)、Green(绿)、Blue(蓝)这三个参数。本申请实施例对用于表征界面元素的颜色的参数不作限制。

示例性地，这四个端点可以分别为第一界面元素中的上端点、下端点、左端点和右端点。进一步地，这四个端点可以是指第一界面元素的边界上的端点。

具体实现中，在获取第一界面元素中四个端点的颜色时，电子设备100可以对第一界面元素的上下左右四个边缘位置进行取色，将提取的颜色作为第一界面元素中四个端点的颜色。

需要注意的是，由于第一界面元素可能为异形图标，即第一界面元素的边缘位置可能并不包含画面内容。因此，在电子设备100提取到颜色之后，可以进一步判断提取的颜色的透明度是否等于1，若等于1，则说明提取的颜色有效，可以作为第一界面元素中提取的颜色，若不等于1，则可以继续向第一界面元素的内部移动一个像素提取颜色，直到提取到有效的颜色为止。

示例性地，图19以第一界面元素为应用图标为例，示出了对第一界面元素提取颜色的四个端点示意图。如图19所示，该上端点可以是指应用图标上边界的中间点，下端点可以是指应用图标下边界的中间点，左端点可以是指应用图标左边界的中间点，右端点可以是指应用图标右边界的中间点。

S502.电子设备100判断上端点和下端点的颜色是否相同。

示例性地，以HSB色值为例，电子设备100可以比较上端点和下端点的HSB色值的大小，若上端点和下端点的HSB色值的大小相同，则说明上端点和下端点的颜色相同。

可选地，若上端点和下端点的HSB色值的差值可以各自都小于第一阈值，示例性的，第一阈值可以为5，也可以认为上端点和下端点的颜色相同。

当上端点和下端点的颜色相同，则执行步骤S503，否则，执行步骤S506。

S503.电子设备100判断左端点和右端点的颜色是否相同。

示例性地，以HSB色值为例，电子设备100可以通过比较左端点和右端点的HSB色值的大小，若左端点和右端点的HSB色值的大小相同，则说明左端点和右端点的颜色相同。

可选地，若左端点和右端点的HSB色值的差值各自都小于阈值，例如5，也可以认为左端点和右端点的颜色相同。

若左端点和右端点的颜色相同，则执行步骤S504，否则，执行步骤S507。

S504.电子设备100判断第一界面元素是否为分层图标。

其中，若第一界面元素包含多个图层，则第一界面元素为分层图像，否则第一界面元素为非分层图标。

若第一界面元素为分层图标，则执行步骤S505，否则，执行步骤S507。

可以理解的是，步骤S504为可选地的步骤，这种情况下，若左端点和右端点的颜色相同，则电子设备100在执行步骤S503之后，可以直接执行步骤S507，即不区分第一界面元素是否为分层图标，直接按照步骤S507来生成第一图像。

S505.电子设备100根据第一界面元素的前景层确定第一图像的前景层，根据第一界面元素上端点和下端点的颜色确定第一图像的背景层为渐变背景。

具体地，第一图像的前景层可以为放大一定比例的第一界面元素的前景层，第一图像的背景层为新增的渐变背景，该渐变背景的颜色可以为从上到下，按照第一界面元素的上端点的颜色到下端点的颜色进行过渡的渐变色。

可以理解的是，若第一界面元素的上端点的颜色和下端点的颜色的色彩值相等，则该新增的渐变背景为纯色背景。

也就是说，若第一界面元素四个端点的颜色几乎相同，则电子设备100可以利用上端点和下端点的颜色来设置第一图像的背景层，将背景层顶端的颜色设置为第一界面元素的上端点的颜色，背景层底端的颜色设置为第一界面元素的下端点的颜色，然后通过设置背景层中间层的颜色为两端颜色的过渡色，完成对背景层的颜色的确定。

可以理解的是，在本申请其他实施例中，电子设备100也可以利用第一界面元素的左端点和右端点的颜色来设置第一图像的背景层，将背景层的颜色设置为从左到右，按照第一界面元素的左端点的颜色到第一界面元素的右端点的颜色过渡的渐变色。

示例性地，为了更好地理解第一图像的渐变背景的生成过程，图20以第一界面元素为应用图标为例，示出了通过步骤S505生成的第一图像的示意图。

如图20所示，应用图标的上端点的颜色为白色，下端点的颜色为浅灰色，假设白色和浅灰色的色彩值的差值小于第一阈值，则根据该应用图标生成的第一图像可以为图20所示的图像01，该图像01的前景层为应用图标的前景层，图像01的背景层为从上方的白色，到下方的浅灰色过渡的渐变背景。

S506.电子设备100判断上端点和下端点的颜色是否相近。

示例性地，以HSB色值为例，电子设备100可以通过比较上端点和下端点的HSB色值的差值，若差值各自都小于第二阈值，例如15，则说明上端点和下端点的颜色相近。

若上端点和下端点的颜色相近，则执行步骤S507，否则，执行步骤S508。

S507.电子设备100根据第一界面元素确定第一图像的前景层，根据第一界面元素上端点和下端点的颜色确定第一图像的背景层为渐变背景。

具体地，第一图像的前景层可以为放大一定比例的第一界面元素，第一图像的背景层为新增的渐变背景，该渐变背景的颜色可以为从上到下，按照第一界面元素的上端点的颜色到下端点的颜色进行过渡的渐变色。

结合步骤S503，S504，S506可以看出，在第一界面元素中上端点和下端点的颜色相同，左端点和右端点的颜色相同，且第一界面元素不能拆分的情况下，以及在第一界面元素中上端点和下端点的颜色相同，左端点和右端点的颜色不同的情况下，以及在第一界面元素中上端点和下端点的颜色相近的情况下，电子设备100都可以基于放大一定比例的第一界面元素确定第一图像的前景层，根据第一界面元素的上端点和下端点的颜色来确定第一图像的背景层。

示例性地，为了更好地理解第一图像的渐变背景的生成过程，图21以第一界面元素为应用图标为例，示出了通过步骤S507生成的第一图像的示意图。

如图21所示，应用图标的上端点的颜色为白色，下端点的颜色为灰色，假设白色和灰色的色彩值的差值小于第二阈值，则根据该应用图标生成的第一图像可以为图21所示的图像02，该图像02的前景层为应用图标的前景层，图像01的背景层为从上方的白色，到下方的灰色过渡的渐变背景。

S508.电子设备100判断上端点和左端点的颜色是否相近。

示例性地，以HSB色值为例，电子设备100可以通过比较上端点和左端点的HSB色值的差值，若差值各自都小于第二阈值，例如15，则说明上端点和左端点的颜色相近。

若上端点和左端点的颜色相近，则执行步骤S509，否则，执行步骤S510。

S509.电子设备100根据第一界面元素确定第一图像的前景层，根据第一界面元素上端点和左端点的颜色确定第一图像的背景层为渐变背景。

具体地，第一图像的前景层可以为放大一定比例的第一界面元素，第一图像的背景层为新增的渐变背景，该渐变背景的颜色可以为从上到下，按照第一界面元素的上端点的颜色到左端点的颜色进行过渡的渐变色。

也就是说，若第一界面元素的上端点和左端点的颜色相近，则电子设备100可以以第一界面元素的上端点和左端点的颜色来设置第一图像的渐变背景。

示例性地，为了更好地理解第一图像的渐变背景的生成过程，图22以第一界面元素为应用图标为例，示出了通过步骤S509生成的第一图像的示意图。

如图22所示，应用图标的上端点的颜色为白色，下端点的颜色为黑色，左端点的颜色为灰色，假设白色和黑色的色彩值的差值大于第一阈值，白色和灰色的色彩值的差值小于第一阈值，则根据该应用图标生成的第一图像可以为图22所示的图像03，该图像03的前景层为应用图标的前景层，图像03的背景层为从上方的白色，到下方的灰色过渡的渐变背景。

S510.电子设备100判断上端点和右端点的颜色是否相近。

示例性地，以HSB色值为例，电子设备100可以通过比较上端点和右端点的HSB色值的差值，若差值各自都小于第二阈值，例如15，则说明上端点和右端点的颜色相近。

若上端点和右端点的颜色相近，则执行步骤S511，否则执行步骤S512。

可以理解的是，本申请实施例对步骤S508和步骤S510的执行顺序不作限制，电子设备100可以先执行步骤S508，在执行步骤S510，即先判断第一界面元素的上端点和左端点的颜色是否相近，在不相近的情况下，再判断第一界面元素的上端点和右端点的颜色是否相近，或者，电子设备100也可以先执行步骤S510，在执行步骤S508，即先判断第一界面元素的上端点和右端点的颜色是否相近，在不相近的情况下，再判断第一界面元素的上端点和左端点的颜色是否相近。

S511.电子设备100根据第一界面元素确定第一图像的前景层，根据第一界面元素上端点和右端点的颜色确定第一图像的背景层为渐变背景。

具体地，第一图像的前景层可以为放大一定比例的第一界面元素，第一图像的背景层为新增的渐变背景，该渐变背景的颜色可以为从上到下，按照第一界面元素的上端点的颜色到右端点的颜色进行过渡的渐变色。

也就是说，若第一界面元素的上端点和右端点的颜色相近，则电子设备100可以以第一界面元素的上端点和右端点的颜色来设置第一图像的渐变背景。

示例性地，为了更好地理解第一图像的渐变背景的生成过程，图23以第一界面元素为应用图标为例，示出了通过步骤S511生成的第一图像的示意图。

如图23所示，应用图标的上端点的颜色为白色，下端点的颜色为黑色，左端点的颜色为黑色，右端点的颜色为灰色，假设白色和黑色的色彩值的差值大于第一阈值，白色和灰色的色彩值的差值小于第一阈值，则根据该应用图标生成的第一图像可以为图23所示的图像04，该图像04的前景层为应用图标的前景层，图像04的背景层为从上方的白色，到下方的灰色过渡的渐变背景。

S512.电子设备100根据第一界面元素确定第一图像的前景层，对第一界面元素上端点和下端点的颜色进行颜色修正，再根据修正后的颜色确定第一图像的背景层为渐变背景。

其中，该颜色修正可以是指调整上端点和/或下端点的颜色，缩小两个端点的颜色差距，使调整后的这两个端点的颜色相近。

示例性地，可以控制上端点的颜色不变，通过调整下端点的颜色，使得调整后的下端点的颜色与上端点的颜色相近。或者，可以控制下端点的颜色不变，通过调整下端点的颜色，使得调整后的上端点的颜色与上端点的颜色相近。或者，可以同时调整上端点和下端点的颜色，使得调整后的上端点的颜色和调整后的下端点的颜色相近。

例如，若上端点的HSB色值中的S值为80，下端点的HSB色值中的S值为40，可以将下端点的HSB色值中的S值更改为60，使得更改后的下端点的颜色与上端点的颜色相近。

具体地，第一图像的前景层可以为放大一定比例的第一界面元素，第一图像的背景层为新增的渐变背景，该渐变背景的颜色可以为从上到下，按照修正后的第一界面元素的上端点的颜色到下端点的颜色进行过渡的渐变色。

也就是说，若第一界面元素的上端点与其余三个端点的颜色都相差较大，则电子设备100可以调整上端点和/或下端点的颜色的差距，使用调整后的端点的颜色来设置第一图像的渐变背景。

示例性地，为了更好地理解第一图像的渐变背景的生成过程，图24以第一界面元素为应用图标为例，示出了通过步骤S512生成的第一图像的示意图。

如图24所示，应用图标的上端点的颜色为白色，下端点的颜色为黑色，左端点的颜色为黑色，右端点的颜色为黑色，假设白色和黑色的色彩值的差值大于第一阈值，白色和灰色的色彩值的差值小于第一阈值，则根据该应用图标生成的第一图像可以为图24所示的图像05，该图像05的前景层为应用图标的前景层，图像05的背景层为从上方的白色，到下方的灰色过渡的渐变背景，该灰色为通过调整下端点颜色获得的颜色。

可以理解的是，上述图20-图25只是为了更好地理解本方案为进行的示意性举例，并不构成对本申请实施例的限制。

另外，需要注意的是，图18只是示例性描述了一种利用第一界面元素中的颜色来生成第一图像的详细过程，在本申请其他实施例中，电子设备100还可以选取第一界面元素中更多或更好的颜色来生成第一图像的渐变背景，本申请对电子设备100选取的端点的位置，端点的数量，判断端点之间的颜色相同或相近的先后顺序等不作限制。

总的来说，电子设备100可以通过第一界面元素中提取的颜色来生成第一图像的背景层。其中，可以从第一界面元素中提取两个颜色，使用这两个颜色来将第一图像的背景层设置为渐变的背景层，从而使得图标启动动画中的画面更加生动丰富。进一步地，若提取的两个该颜色的差距较大，则可以对提取的颜色进行修正，缩小两个颜色之间的差距，并使用修正后的两个颜色来设置渐变的背景层，从而保证渐变的背景层的色调更加和谐。

图25示出了电子设备100的硬件结构示意图。

电子设备100可以是手机、平板电脑、桌面型计算机、膝上型计算机、手持计算机、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本，以及蜂窝电话、个人数字助理(personal digital assistant，PDA)、增强现实(augmentedreality，AR)设备、虚拟现实(virtual reality，VR)设备、人工智能(artificialintelligence,AI)设备、可穿戴式设备、车载设备、智能家居设备和/或智慧城市设备，本申请实施例对该电子设备的具体类型不作特殊限制。

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

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

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

在一些实施例中，处理器110可用于确定第一图像，以及属性动画的属性值，并根据该属性值生成图标启动动画、窗口启动动画和退出动画。

控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

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

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

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器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)。显示面板还可以采用有机发光二极管(organiclight-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)，柔性发光二极管(flexlight-emitting diode，FLED)，miniled，microled，micro-oled，量子点发光二极管(quantum dot light emitting diodes，QLED)等制造。在一些实施例中，电子设备可以包括1个或N个显示屏194，N为大于1的正整数。

在一些实施例中，显示屏194可用于显示应用启动过程中涉及的启动动画，包括图标启动动画，窗口启动动画，以及退出应用过程中涉及的退出动画。具体关于显示屏194显示的内容可以参见前述图1A-图1F、图2A-图2C、图8A-图8D、图9A-图9F、图10A-图10D、图11A-图11D的内容。

电子设备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的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

内部存储器121可以包括一个或多个随机存取存储器(random access memory，RAM)和一个或多个非易失性存储器(non-volatile memory，NVM)。

随机存取存储器可以包括静态随机存储器(static random-access memory，SRAM)、动态随机存储器(dynamic random access memory，DRAM)、同步动态随机存储器(synchronous dynamic random access memory,SDRAM)、双倍资料率同步动态随机存取存储器(double data rate synchronous dynamic random access memory,DDR SDRAM，例如第五代DDR SDRAM一般称为DDR5 SDRAM)等；非易失性存储器可以包括磁盘存储器件、快闪存储器(flash memory)。

快闪存储器按照运作原理划分可以包括NOR FLASH、NAND FLASH、3D NAND FLASH等，按照存储单元电位阶数划分可以包括单阶存储单元(single-level cell,SLC)、多阶存储单元(multi-level cell,MLC)、三阶储存单元(triple-level cell,TLC)、四阶储存单元(quad-level cell,QLC)等，按照存储规范划分可以包括通用闪存存储(英文：universalflash storage，UFS)、嵌入式多媒体存储卡(embedded multi media Card，eMMC)等。

随机存取存储器可以由处理器110直接进行读写，可以用于存储操作系统或其他正在运行中的程序的可执行程序(例如机器指令)，还可以用于存储用户及应用程序的数据等。

非易失性存储器也可以存储可执行程序和存储用户及应用程序的数据等，可以提前加载到随机存取存储器中，用于处理器110直接进行读写。

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

电子设备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静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。

距离传感器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分离。

应理解，上述方法实施例中的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。结合本申请实施例所公开的方法步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

本申请还提供一种电子设备，该电子设备可以包括：存储器和处理器。其中，存储器可用于存储计算机程序；处理器可用于调用所述存储器中的计算机程序，以使得该电子设备执行上述任意一个实施例中电子设备100执行的方法。

本申请还提供了一种芯片系统，所述芯片系统包括至少一个处理器，用于实现上述任一个实施例中电子设备100执行的方法中所涉及的功能。

在一种可能的设计中，所述芯片系统还包括存储器，所述存储器用于保存程序指令和数据，存储器位于处理器之内或处理器之外。

该芯片系统可以由芯片构成，也可以包含芯片和其他分立器件。

可选地，该芯片系统中的处理器可以为一个或多个。该处理器可以通过硬件实现也可以通过软件实现。当通过硬件实现时，该处理器可以是逻辑电路、集成电路等。当通过软件实现时，该处理器可以是一个通用处理器，通过读取存储器中存储的软件代码来实现。

可选地，该芯片系统中的存储器也可以为一个或多个。该存储器可以与处理器集成在一起，也可以和处理器分离设置，本申请实施例并不限定。示例性地，存储器可以是非瞬时性处理器，例如只读存储器ROM，其可以与处理器集成在同一块芯片上，也可以分别设置在不同的芯片上，本申请实施例对存储器的类型，以及存储器与处理器的设置方式不作具体限定。

示例性地，该芯片系统可以是现场可编程门阵列(field programmable gatearray，FPGA)，可以是专用集成芯片(application specific integrated circuit，ASIC)，还可以是系统芯片(system on chip，SoC)，还可以是中央处理器(central processorunit，CPU)，还可以是网络处理器(network processor，NP)，还可以是数字信号处理电路(digital signal processor，DSP)，还可以是微控制器(micro controller unit，MCU)，还可以是可编程控制器(programmable logic device，PLD)或其他集成芯片。

本申请还提供一种计算机程序产品，所述计算机程序产品包括：计算机程序(也可以称为代码，或指令)，当所述计算机程序被运行时，使得计算机执行上述任一个实施例中电子设备100任意一个执行的方法。

本申请还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序(也可以称为代码，或指令)。当所述计算机程序被运行时，使得计算机执行上述任一个实施例中电子设备100任意一个执行的方法。

应理解，本申请实施例中的处理器可以是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法实施例的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、数字信号处理器(digitalsignal processor，DSP)、专用集成电路(AP 800plication specific integratedcircuit，ASIC)、现场可编程门阵列(field programmable gate array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

另外，本申请实施例还提供一种装置。该装置具体可以是组件或模块，该装置可包括相连的一个或多个处理器和存储器。其中，存储器用于存储计算机程序。当该计算机程序被一个或多个处理器执行时，使得装置执行上述各方法实施例中的方法。

其中，本申请实施例提供的装置、计算机可读存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法。因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。

本申请的各实施方式可以任意进行组合，以实现不同的技术效果。

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

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

总之，以上所述仅为本发明技术方案的实施例而已，并非用于限定本发明的保护范围。凡根据本发明的揭露，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (17)

1.一种显示方法，其特征在于，所述方法包括：

电子设备检测到作用于第一界面元素的第一操作；

响应于所述第一操作，所述电子设备显示第一启动动画，所述第一启动动画包括所述第一界面元素的放大过程；

所述第一应用的应用窗口绘制完成，所述电子设备显示窗口启动动画，所述显示窗口启动动画，包括：所述应用窗口中显示的内容逐渐增多且显示内容的尺寸逐渐变大；

所述窗口启动动画结束，所述应用窗口中显示有所述第一应用的第一页面。

2.根据权利要求1所述的方法，其特征在于，所述电子设备显示第一启动动画之前，所述方法还包括：

所述第一界面元素包括第一前景层和第一背景层；

所述电子设备基于第一比例放大所述第一前景层，得到第二前景层；

所述电子设备基于第二比例放大所述第一背景层，得到第二背景层，其中，所述第二背景层的大小与所述第一页面的大小相同；

所述电子设备根据所述第二前景层和所述第二背景层生成所述第一启动动画的图像帧；所述第一启动动画用于展示所述第一前景层向所述第二前景层放大的过程，以及所述第一背景层向所述第二背景层放大的过程。

3.根据权利要求2所述的方法，其特征在于，所述第一比例不同于所述第二比例。

4.根据权利要求1所述的方法，其特征在于，所述电子设备显示第一启动动画之前，所述方法还包括：

所述电子设备基于第三比例放大所述第一界面元素，得到第二前景层；

所述电子设备根据所述第二前景层和第二背景层生成所述第一启动动画的图像帧，其中，所述第二背景层包括第一图片，所述第一图片的大小与所述第一页面的大小相同，所述第一启动动画用于展示所述第一界面元素向所述第二前景层放大的过程，以及所述第一图片的出现和放大过程。

5.根据权利要求4所述的方法，其特征在于，

所述第一图片为第一颜色的纯色背景图，所述第一颜色包括以下任意一种情况：所述第一颜色为预置的颜色，所述第一颜色为所述第一界面元素中包含的颜色，或者，所述第一颜色的色彩值为所述第一界面元素中包含的颜色的色彩值*系数；

或者，

所述第一图片为从第二颜色到第三颜色过渡的渐变背景图，其中，所述第二颜色和/或所述第三颜色为基于所述第一界面元素中包含的颜色得到的。

6.根据权利要求2-5任一项所述的方法，其特征在于，所述第一启动动画的图像帧为所述电子设备通过View动画创建的视图，或者，所述第一启动动画的图像帧为所述电子设备通过窗口动画创建的图标窗口中承载的显示内容，所述图标窗口不同于所述第一应用的应用窗口。

7.根据权利要求2-6任一项所述的方法，其特征在于，

所述电子设备根据所述第二前景层和所述第二背景层生成所述第一启动动画的图像帧，包括：所述电子设备基于所述第二前景层、所述第二背景层和所述第一启动动画的动画属性生成所述第一启动动画的图像帧，其中，所述第一启动动画的动画属性包括所述第二前景层的动画属性和所述第二背景层的动画属性；

所述电子设备显示窗口启动动画之前，包括：所述电子设备基于所述第一应用的应用窗口和所述第一应用的应用窗口的动画属性生成所述窗口启动动画的图像帧；

所述第一启动动画所在图层位于所述窗口启动动画所在图层的下方；

所述第二背景层的动画属性与所述第一应用的应用窗口的动画属性一致，所述动画属性包括以下一项或多项：位移、缩放、裁剪和圆角。

8.根据权利要求1-7任一项所述的方法，其特征在于，

所述电子设备显示第一启动动画之后，所述方法还包括：

所述电子设备启动窗口容器动画，所述窗口容器动画与所述第一启动动画在同一时刻拥有相同的动画属性；

所述电子设备显示窗口启动动画之前，所述方法还包括：

所述电子设备将所述应用窗口更新到所述窗口容器动画中。

9.根据权利要求1-8任一项所述的方法，其特征在于，所述电子设备在显示到所述第一启动动画的第一图像帧时，所述第一应用的应用窗口绘制完成，所述电子设备显示的窗口启动动画，包括从第一大小的所述应用窗口到第二大小的所述应用窗口的放大过程，其中，所述第一大小大于或等于所述第一图像帧的大小，所述第二大小为所述第一页面的大小。

10.根据权利要求1-9任一项所述的方法，其特征在于，所述第一界面元素包括以下任意一项：应用图标、服务卡片、widget、通知栏、多任务界面中的历史任务。

11.根据权利要求1-10任一项所述的方法，其特征在于，所述窗口启动动画的前N帧图像的透明度逐渐降低。

12.根据权利要求1-11任一项所述的方法，其特征在于，在所述电子设备显示所述第一启动动画的过程中，所述方法还包括：

所述电子设备检测到第二操作；所述第二操作用于退出所述第一应用；

响应于所述第二操作，所述电子设备倒放已显示的所述第一启动动画中的图像帧，或者，所述电子设备继续显示所述第一启动动画的M帧图像，再倒放已显示的所述第一启动动画中的图像帧，且继续显示的所述M帧图像中，随着时间的推移，所述M帧图像的播放速度逐渐减小，所述倒放显示的前L帧图像的播放速度逐渐增大。

13.根据权利要求12所述的方法，其特征在于，所述第二操作包括滑动操作，在所述电子设备倒放已显示的所述第一启动动画中的图像帧的过程中，前K帧图像跟随用户的滑动轨迹进行移动。

14.根据权利要求1-13任一项所述的方法，其特征在于，其特征在于，在所述电子设备显示所述第一启动动画的过程中，所述方法还包括：

所述电子设备检测到第二操作，其中，所述第二操作用于退出所述第一应用；

当所述第一应用的应用窗口绘制完成，响应于所述第二操作，所述电子设备显示所述第一应用的应用窗口到所述第一界面元素的退出动画。

15.根据权利要求1-14任一项所述的方法，其特征在于，所述第一启动动画由所述电子设备中的系统单元创建，所述系统单元不同于所述第一应用。

16.一种电子设备，其特征在于，包括存储器，一个或多个处理器，以及一个或多个程序；所述一个或多个处理器在执行所述一个或多个程序时，使得所述电子设备实现如权利要求1至15任一项所述的方法。

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