CN114115615B - 界面显示方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请涉及一种界面显示方法、装置、电子设备和存储介质。所述方法包括：显示第一界面；第一界面展示有第一图像上所选对象的轮廓线条；响应于界面转换的触发事件，以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在第二图像的呈现过程中淡化轮廓线条，以显示出第二界面；第二界面展示有第二图像。采用本方法能够在第一界面中显示第一图像上所选对象的轮廓线条，在界面转换时，可从该对象的轮廓线条作为起点逐渐呈现出第二图像，并且轮廓线条逐渐淡化，形成渲染效果，从而提高界面转换过程中衔接过程的流畅度。

Description

界面显示方法、装置、电子设备和存储介质

技术领域

本申请涉及终端显示技术领域，特别是涉及一种界面显示方法、装置、电子设备和存储介质。

背景技术

随着电子设备的普及，电子设备的显示技术已经发展的越来越成熟，显示技术可以利用有机发光二极体的自发光技术，在电子设备处于例如息屏等状态下仍然可以显示诸如时间、电量等信息，使得用户可以减少点亮屏幕的次数，以达到节省电量的效果。

然而，目前电子设备在不同界面的转换过程中流畅度较低，以息屏至锁屏的界面转化为例，传统技术实现息屏到锁屏界面的转化，通常是在检测到切换指令后直接将息屏时显示的画面突变显示为锁屏显示的画面，不同界面在转换过程中的衔接流畅度较低，画面显示突变容易让用户感受到明显的切换感，影响整体用户体验。

发明内容

基于此，有必要针对上述技术问题，提供一种界面显示方法、装置、电子设备和存储介质。

一种界面显示方法，所述方法包括：

显示第一界面；所述第一界面展示有第一图像上所选对象的轮廓线条；

响应于界面转换的触发事件，以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条，以显示出第二界面；所述第二界面展示有所述第二图像。

在其中一个实施例中，所述第一图像与所述第二图像为相同的图像；所述第一界面展示的所述第一图像上所选对象的轮廓线条与所述第二界面展示的所述第二图像上所选对象的轮廓线条位置对应。

在其中一个实施例中，所述以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条之前，所述方法还包括：若所述第一界面展示的所述第一图像上所选对象的轮廓线条的位置与所述第二界面的第二图像上所选对象的轮廓线条不一致，则在所述第一界面上将所述第一图像上所选对象的轮廓线条的位置向所述第二图像上所选对象的轮廓线条的位置对齐。

在其中一个实施例中，在所述第二图像的呈现过程中，所述第二图像上所选对象的呈现优先于所述第二图像上背景的呈现。

在其中一个实施例中，所述第二图像的呈现速度与所述轮廓线条的淡化速度相适应。

在其中一个实施例中，所述第一界面位于所述第二界面上方；所述以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，包括：基于所述第一界面上各第一像素点与所述轮廓线条的位置关系，确定所述第二界面上各第二像素点的呈现顺序；从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像。

在其中一个实施例中，所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：按照所述呈现顺序调整所述各第一像素点的透明度以呈现所述第二界面上的第二图像；或者，所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述第二界面上各第二像素点的透明度；或者，所述第一界面与所述第二界面之间具有图层；所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述图层上各第三像素点的透明度。

在其中一个实施例中，所述按照所述呈现顺序调整所述各第一像素点的透明度以呈现所述第二界面上的第二图像，包括：按照所述呈现顺序以及第一透明度变化率，提高所述各第一像素点的透明度以呈现所述第二界面上的第二图像；所述第一透明度变化率根据所述各第一像素点与所述轮廓线条表征的所述所选对象的位置关系确定；或者，所述按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述第二界面上各第二像素点的透明度，包括：按照所述呈现顺序和第一透明度变化率提高所述各第一像素点的透明度，以及，按照所述呈现顺序和第二透明度变化率降低所述各第二像素点的透明度；所述第二透明度变化率与所述第一透明度变化率相适应；或者，所述按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述图层上各第三像素点的透明度，包括：按照所述呈现顺序和第一透明度变化率提高所述各第一像素点的透明度，以及，按照所述呈现顺序和第三透明度变化率提高所述各第三像素点的透明度；所述第三透明度变化率与所述第一透明度变化率相适应。

在其中一个实施例中，所述第一界面上位于所述第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于所述区域外的第一像素点的第一透明度变化率。

在其中一个实施例中，所述在所述第二图像的呈现过程中淡化所述轮廓线条，包括：在透明度的变化过程中淡化所述轮廓线条。

在其中一个实施例中，所述第一界面为息屏界面；所述第二界面为锁屏界面。

一种界面显示装置，所述装置包括：

第一界面显示模块，用于显示第一界面；所述第一界面展示有第一图像上所选对象的轮廓线条；

第二界面显示模块，用于响应于界面转换的触发事件，以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条，以显示出第二界面；所述第二界面展示有所述第二图像。

一种电子设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法的步骤。

上述界面显示方法、装置、电子设备和存储介质，显示第一界面；第一界面展示有第一图像上所选对象的轮廓线条；响应于界面转换的触发事件，以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在第二图像的呈现过程中淡化轮廓线条，以显示出第二界面；第二界面展示有第二图像。本申请通过在第一界面中显示第一图像上所选对象的轮廓线条，在界面转换时，可从该对象的轮廓线条作为起点逐渐呈现出第二图像，并且轮廓线条逐渐淡化，形成渲染效果，从而提高界面转换过程中衔接过程的流畅度。

附图说明

图1为一个实施例中界面显示方法的流程示意图；

图2为一个实施例中界面显示方法的界面示意图；

图3为一个实施例中以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像的步骤的流程示意图；

图4为一个实施例中界面显示装置的结构框图；

图5为一个实施例中电子设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在一个实施例中，如图1所示，提供了一种界面显示方法，本实施例以该方法应用于终端进行举例说明，终端应用上述界面显示方法的界面显示如图2 所示。该方法可以包括以下步骤：

步骤S101，终端显示第一界面；第一界面展示有第一图像上所选对象的轮廓线条。

其中，所选对象为第一图像中的对象，可以是人，也可以是动物等用户可能感兴趣的对象，第一图像则可根据用户需要进行选取，当终端显示第一界面时，在终端的显示屏上可以展示上述所选对象的轮廓线条。

步骤S102，响应于界面转换的触发事件，终端以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在第二图像的呈现过程中淡化轮廓线条，以显示出第二界面；第二界面展示有第二图像。

本步骤中，如果终端检测到界面转换的触发事件，示例性的，该触发事件可以是用户拾起终端，或者用户点击终端的电源键或其他按键时，或者用户点击终端的屏幕时，终端会从第一界面转换至第二界面。在第二界面的显示下，终端会将第二图像进行呈现，第二界面中展示的第二图像可以和第一界面中轮廓线条来源的第一图像属于同一张图像，也可以是不同的图像。具体来说，终端首先会从第一界面中展示的轮廓线条作为起点，并向外进行扩散渲染，使得第二图像逐渐呈现，并且在第二图像呈现过程中，第一界面显示的轮廓线条逐渐淡化，当终端从第一界面完成到第二界面的界面转换时，第二图像完整呈现于终端的显示屏上时，轮廓线条完全消失。

具体地，参考图2，其中图2中的201部分表示终端在第一界面上显示的第一图像所选对象的轮廓线条，图2中的204部分则表征终端在第二界面上显示第二图像，当终端接收到界面转换的触发事件时，可对其进行响应，终端可按照图2中的201部分、202部分、203部分以及204部分的顺序，将第一界面显示的第一图像上所选对象的轮廓线条逐渐转换成第二界面显示的第二图像，202 部分与203部分为转换的中间过程，可以看出，随着转换的进行，第二图像逐渐清晰，而第一界面中的轮廓线条则逐渐淡化，直到消失，从而形成渲染效果。

上述界面显示方法中，终端显示第一界面；第一界面展示有第一图像上所选对象的轮廓线条；响应于界面转换的触发事件，以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在第二图像的呈现过程中淡化轮廓线条，以显示出第二界面；第二界面展示有第二图像。本申请通过终端在第一界面中显示第一图像上所选对象的轮廓线条，在界面转换时，可从该对象的轮廓线条作为起点逐渐呈现出第二图像，并且轮廓线条逐渐淡化，形成渲染效果，从而提高界面转换过程中衔接过程的流畅度。

在一个实施例中，第一图像与第二图像可以是相同的图像；第一界面展示的第一图像上所选对象的轮廓线条与第二界面展示的第二图像上所选对象的轮廓线条位置对应。

本实施例中，第一图像与第二图像可以是相同的图像，因此第一图像上的所选对象与第二图像上的所选对象属于同一个对象，因此其具有相同的轮廓线条，且第一界面展示的第一图像上所选对象的轮廓线条与第二界面展示的第二图像上所选对象的轮廓线条的位置是相对应的。需要说明的是，位置对应是指第一图像上所选对象的轮廓线条与第二界面展示的第二图像上所选对象的轮廓线条之间的距离小于一个预设的距离阈值，而不需要第一图像上所选对象的轮廓线条与第二界面展示的第二图像上所选对象的轮廓线条的位置完全一致。

进一步地，步骤S102之前，上述方法还可以包括：若第一界面展示的第一图像上所选对象的轮廓线条的位置与第二界面的第二图像上所选对象的轮廓线条不一致，则终端在第一界面上将第一图像上所选对象的轮廓线条的位置向第二图像上所选对象的轮廓线条的位置对齐。

终端有可能因为使用时间过长，从而使得第一界面展示的轮廓线条的位置发生偏移，从而导致第一界面展示的轮廓线条的位置与第二界面的第二图像上所选对象的轮廓线条的位置不一致。同时，由于轮廓线条具有一定宽度，那么此时终端可以对第一界面上展示的轮廓线条的位置进行微移，使得其对齐第二图像上所选对象的轮廓线条的位置，通过这种方式可以避免在第一界面展示的轮廓线条进行对齐的过程中轮廓线条位置发生变化而产生的视觉效果。

在一些实施例中，终端在第二图像的呈现过程中，第二图像上所选对象的呈现可以优先于第二图像上背景的呈现。

本实施例中，第二图像除了包括所选对象，其余部分则是第二图像的背景区域，即第二图像由所选对象与背景区域组成。在终端对第二图像的呈现过程中，第二图像上所选对象的呈现会优先于第二图像上背景的呈现，即终端完成第二图像上所选对象的呈现会在完成第二图像上背景的呈现之前，从而实现对第二图像上所选对象进行凸显的视觉效果。

在一些实施例中，第二图像的呈现速度与所述轮廓线条的淡化速度相适应。

其中，呈现速度指的是终端逐渐呈现第二界面所展示的第二图像的速度，而淡化速度则指的是轮廓线条的逐渐淡化的速度，呈现速度与淡化速度相对应可以保证在终端界面转换完成后完全显示第二图像的同时，轮廓线条刚好完成淡化直到消失。具体来说，例如，由第一界面展示的第一图像上所选对象的轮廓线条到第二界面下完全呈现第二图像可能需要0.5秒，那么轮廓线条的逐渐淡化直到消失的过程也是0.5秒。本实施例可以通过设置呈现速度与轮廓线条的淡化速度相适应的方式实现此过程，而不至于在0.1秒就完成轮廓线条逐渐淡化直到消失的过程，可以进一步提高界面转换过程的衔接性。

上述实施例提供的技术方案中，终端通过在第一界面上将展示的轮廓线条的位置向由第二界面展示的第二图像上所选对象的轮廓线条的位置对齐，可以避免因使用时间过长可能导致的轮廓线条偏移，同时，终端可优先呈现第二图像上所选对象，实现了所选对象突出显示的效果，另外，终端还通过设置第二图像的呈现速度与轮廓线条的淡化速度相适应，使得终端界面转换完成后完全显示第二图像的同时，轮廓线条刚好完成淡化直到消失，从而进一步提高界面转换过程的衔接性。

在一个实施例中，第一界面位于第二界面上方，如图3所示，步骤S102可以进一步包括：

步骤S301，基于第一界面上各第一像素点与轮廓线条的位置关系，终端确定第二界面上各第二像素点的呈现顺序。

其中，第一界面可以设置在第二界面上方，通过这个方式可以使得第一界面遮挡第二界面，因此终端在第一界面上展示的所选对象的轮廓线条可通过这个方式遮挡第二界面展示的第二图像，而第一像素点则指的是位于第一界面上的像素点，第二像素点则表示第二界面上的像素点，呈现顺序则指的是终端在第二界面上呈现第二像素点的顺序。

具体来说，终端在第一界面下是通过多个第一像素点从而显示出第一图像上所选对象的轮廓线条，在第二界面下则是通过多个第二像素点从而显示出第二图像，由于每个第一像素点与第二像素点与终端的显示屏存在位置上的对应关系，因此每个第一像素点与第二像素点之间存在对应关系。终端可以基于每个第一像素点与该轮廓线条的位置关系，从而确定其对应的每个第二像素点的呈现顺序。

步骤S302，终端从起始位置开始按照呈现顺序呈现第二界面上的第二图像。

在步骤S301中终端得到每个第二像素点的呈现顺序后，可以基于呈现顺序从所选对象的轮廓线条开始呈现第二像素点，使得终端可以在第二界面上呈现出第二图像。

示例性的，步骤S301中可设置与该轮廓线条之间的距离较短的第一像素点所对应的第二像素点有更前的呈现顺序，而与该轮廓线条之间的距离较远的第一像素点所对应的第二像素点则可以设置偏后的呈现顺序，那么在步骤S302中终端按照呈现顺序呈现第二图像时则可以实现与轮廓线条之间的距离较短的区域先开始呈现第二图像，并逐渐向外扩散的效果，从而实现了以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像的呈现效果。

本实施例中，终端通过按照位置关系确定每个第二像素点呈现顺序，并按照呈现顺序呈现第二界面上的第二图像，实现了以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像的呈现效果。

进一步地，步骤S302可以进一步包括：终端按照呈现顺序调整各第一像素点的透明度以呈现第二界面上的第二图像；或者按照呈现顺序调整第一界面上各第一像素点的透明度，并按照呈现顺序调整第二界面上各第二像素点的透明度；或者第一界面与第二界面之间具有图层，终端按照呈现顺序调整第一界面上各第一像素点的透明度，并按照呈现顺序调整图层上各第三像素点的透明度。

其中，透明度的调整主要是用于改变各像素点的透明度，透明度从从零增加到百分百，第一界面上的第一像素点可以从完全不透明的状态逐渐转换成完全透明的状态，由于第一界面位于第二界面上方，终端可以通过对各第一像素点的透明度进行调整的方式，呈现第二界面上的第二图像。具体来说：终端在呈现第一界面的时候，可以将第一界面的透明度设置为零，使得第一界面完全遮挡第二界面，而如果需要在第二界面呈现第二图像时，则可以通过提高第一界面上各第一像素点的透明度，以呈现出第二界面上的第二图像，当每一个第一像素点的透明度从零增加到百分百时，终端则可以完全显示第二界面上的第二图像。

例如，对于安卓设备终端而言，可以通过调整像素点颜色的不透明值来实现透明度的变化。颜色的不透明值范围是从0到255，即00到ff，其中，不透明值设置为00代表颜色完全透明，即此时对应的像素点的透明度为最大，而不透明值设置为ff代表颜色完全不透明，即此时对应的像素点的透明度为最小，因此可以通过改变各像素点颜色的不透明值的方式，调整各像素点的透明度。

另外，为了进一步提高界面转换的效果，提高界面转换的衔接性，终端按照呈现顺序调整第一界面上各第一像素点的透明度的同时，可以按照呈现顺序调整第二界面上各第二像素点的透明度，即终端可以将第一界面的透明度设置为零的同时，将第二界面上各第二像素点的透明度设置为百分百，那么第一界面上各第一像素点的透明度逐渐增加的同时，第二界面上各第二像素点的透明度也会逐渐降低，从而进一步提高界面转换的衔接效果。

而由于终端直接对第二图像进行处理容易造成计算量复杂，从而降低界面转换的效率，在一些实施例中，终端还可以通过在第一界面与第二界面之间设置图层的方式，通过对图层上各第三像素点的透明度进行调整的方式，以实现与终端降低第二界面上各第二像素点的透明度的相同效果。

同时，终端按照呈现顺序提高各第一像素点的透明度以呈现第二界面上的第二图像，可以进一步包括：终端按照呈现顺序以及第一透明度变化率，提高各第一像素点的透明度以呈现所述第二界面上的第二图像；第一透明度变化率根据各第一像素点与轮廓线条表征的所选对象的位置关系确定。

其中，第一透明度变化率用于表征第一像素点从透明度为零增加到透明度为百分百的快慢程度，当透明度变化率越大，第一像素点从透明度为零增加到透明度为百分百的速度就会越快，该透明度变化率由第一像素点与轮廓线条表征的所选对象的位置关系确定。终端可以对不同的第一像素点设置不同的透明度变化率，使得不同的第一像素点有不同的透明度变化的快慢，以使得拥有相同呈现顺序的第一像素点也可以有不同的呈现优先级。

例如第一像素点A位于轮廓线条表征的所选对象的区域内，第一像素点B 则位于轮廓线条表征的所选对象的区域外。第一像素点A与第一像素点B都是在0.1秒后开始增加透明度以呈现第二图像，终端可以设置第一像素点A的透明度变化率是第一像素点B的两倍，那么假如第一像素点A在0.2秒时完成从透明度为零增加到透明度为百分百，第一像素点B则需要在0.3秒才完成从透明度为零增加到透明度为百分百，从而实现了第一像素点A的优先呈现效果。

或者，终端按照呈现顺序提高第一界面上各第一像素点的透明度，并按照呈现顺序降低第二界面上各第二像素点的透明度，可以进一步包括：终端按照呈现顺序和第一透明度变化率提高各第一像素点的透明度，以及，按照呈现顺序和第二透明度变化率降低各第二像素点的透明度；第二透明度变化率与第一透明度变化率相适应。

第二透明度变化率则是用于表征第二像素点从透明度为百分百降低到透明度为零的快慢程度，当第二透明度变化率越大，则第二像素点从透明度为百分百降低到透明度为零的速度越快。终端按照呈现顺序和第一透明度变化率提高各第一像素点的透明度的同时，可以通过与第一透明度变化率相适应的第二透明度变化率按照该呈现顺序降低与各第一像素点对应的第二像素点的透明度，使得第一像素点的透明度增加速度与第二像素点的透明度降低速度相适应。

同理，终端按照呈现顺序提高第一界面上各第一像素点的透明度，并按照呈现顺序降低设于第一界面与第二界面之间的图层上各第三像素点的透明度，可以进一步包括：终端按照呈现顺序和第一透明度变化率提高各第一像素点的透明度，以及，按照呈现顺序和第三透明度变化率提高各第三像素点的透明度；第三透明度变化率与第一透明度变化率相适应。

第三透明度变化率则是用于表征第三像素点从透明度为百分百降低到透明度为零的快慢程度，与第二透明度变化率类似，终端按照呈现顺序和第一透明度变化率提高各第一像素点的透明度的同时，可以通过与第一透明度变化率相适应的第三透明度变化率按照该呈现顺序提高与各第一像素点对应的第三像素点的透明度，使得第一像素点的透明度增加速度与第三像素点的透明度增加速度相适应，从而使得终端得以实现按照第二透明度变化率降低第二界面上各第二像素点的透明度的相同效果。

进一步地，第一界面上位于第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于区域外的第一像素点的第一透明度变化率。

其中，第一图像上所选对象对应区域内可以对应于第一界面上所选对象的轮廓线条所包围的区域内部，而区域外则指的是第一图像上所选对象对应区域外部，在第一图像与第二图像为相同图像的情况下，第一图像上所选对象对应区域内可对应于第二图像上所选对象区域，而第一图像上所选对象对应区域外则可对应于第二图像上的背景区域。本实施例通过设置第一界面上位于第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于区域外的第一像素点的第一透明度变化率，可以实现第二图像上所选对象的呈现优先于第二图像上背景的呈现的效果。

上述实施例，终端通过设置不同的第一像素点对应不同的第一透明度变化率的方式，实现了第二图像可基于不同优先级进行呈现，另外，还通过设置第二透明度变化率以及第三透明度变化率的方式，进一步提高了界面转换的衔接效果。最后还通过第一界面上位于第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于区域外的第一像素点的第一透明度变化率，实现了第二图像上所选对象的呈现优先于第二图像上背景的呈现的效果，进一步突出了第二图像中所选对象的呈现效果。

在一些实施例中，终端在第二图像的呈现过程中淡化轮廓线条，具体可以包括：终端在透明度的变化过程中淡化轮廓线条。

具体的，在终端提高各第一像素点的透明度的过程中，由于透明度的增加，第一界面上展示的第一图像上所选对象的轮廓线条变的透明，从而实现了轮廓线条的淡化效果。由于轮廓线条的淡化效果是通过透明度的变化实现的效果，同时，第二图像的呈现效果也是基于上述透明度变化实现的效果，因此第二图像的呈现速度以及轮廓线条的淡化速度都可以由透明度变化率所决定，从而终端可通过此方式实现第二图像的呈现速度与轮廓线条的淡化速度相适应。

本实施例中，终端通过在透明度的变化过程中淡化轮廓线条，实现了第二图像的呈现速度与轮廓线条的淡化速度相适应的效果，从而进一步提高界面转换过程的衔接性。

在一个实施例中，第一界面可以是息屏界面，第二界面可以是锁屏界面。

具体的，如上任一项实施例所提供的界面显示方法可适用于终端从息屏界面切换至锁屏界面的过程中。其中，当终端显示息屏界面时，可通过在该息屏界面上点亮第一图像上所选对象的轮廓线条上的像素点的方式使得该第一界面上展示出相应的轮廓线条。当终端检测到界面转换的触发事件时，例如检测到用户通过点击终端电源键触发从息屏界面切换至锁屏界面的事件时，终端可以以该息屏界面上的轮廓线条为起始位置，逐渐向外呈现出锁屏界面展示的第二图像，当锁屏界面完全展示第二图像时，完成息屏界面到锁屏界面的切换，从而实现从息屏界面上显示的轮廓线条转换为锁屏界面的任意图像的无缝衔接。

应该理解的是，虽然本申请的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图4所示，提供了一种界面显示装置，包括：第一界面显示模块401和第二界面显示模块402，其中：

第一界面显示模块401，用于显示第一界面；第一界面展示有第一图像上所选对象的轮廓线条；

第二界面显示模块402，用于响应于界面转换的触发事件，以第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在第二图像的呈现过程中淡化轮廓线条，以显示出第二界面；第二界面展示有第二图像。

在一个实施例中，第一图像与第二图像为相同的图像；第一界面展示的第一图像上所选对象的轮廓线条与第二界面展示的所述第二图像上所选对象的轮廓线条位置对应。

在一个实施例中，界面显示装置，还包括：轮廓线条对齐模块，用于若第一界面展示的第一图像上所选对象的轮廓线条的位置与第二界面的第二图像上所选对象的轮廓线条不一致，则在第一界面上将第一图像上所选对象的轮廓线条的位置向第二图像上所选对象的轮廓线条的位置对齐。

在一个实施例中，在第二图像的呈现过程中，第二图像上所选对象的呈现优先于第二图像上背景的呈现。

在一个实施例中，第二图像的呈现速度与轮廓线条的淡化速度相适应。

在一个实施例中，第一界面位于第二界面上方；第二界面显示模块402，进一步用于基于第一界面上各第一像素点与轮廓线条的位置关系，确定第二界面上各第二像素点的呈现顺序；从起始位置开始按照呈现顺序呈现第二界面上的第二图像。

在一个实施例中，第二界面显示模块402，进一步用于按照呈现顺序提高各第一像素点的透明度以呈现第二界面上的第二图像；或者用于按照呈现顺序调整第一界面上各第一像素点的透明度，并按照呈现顺序调整第二界面上各第二像素点的透明度；或者第一界面与第二界面之间具有图层，用于按照呈现顺序调整第一界面上各第一像素点的透明度，并按照呈现顺序调整图层上各第三像素点的透明度。

在一个实施例中，第二界面显示模块402，进一步用于按照呈现顺序以及第一透明度变化率，提高各第一像素点的透明度以呈现第二界面上的第二图像；第一透明度变化率根据各第一像素点与轮廓线条表征的所选对象的位置关系确定；或者用于按照呈现顺序和第一透明度变化率提高各第一像素点的透明度，以及，按照呈现顺序和第二透明度变化率降低各第二像素点的透明度；第二透明度变化率与第一透明度变化率相适应；或者用于按照所述呈现顺序和第一透明度变化率提高所述各第一像素点的透明度，以及，按照呈现顺序和第三透明度变化率提高各第三像素点的透明度；第三透明度变化率与第一透明度变化率相适应。

在一个实施例中，第一界面上位于第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于区域外的第一像素点的第一透明度变化率。

在一个实施例中，第二界面显示模块402，进一步用于在透明度的变化过程中淡化轮廓线条。

在一个实施例中，第一界面为息屏界面；第二界面为锁屏界面。

关于界面显示装置的具体限定可以参见上文中对于界面显示方法的限定，在此不再赘述。上述界面显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于电子设备中的处理器中，也可以以软件形式存储于电子设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种电子设备，该电子设备可以是终端，其内部结构图可以如图5所示。该电子设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该电子设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种界面显示方法。该电子设备的显示屏可以是液晶显示屏，该电子设备的输入装置可以是显示屏上覆盖的触摸层，也可以是电子设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图5中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种电子设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory， SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (12)

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

显示第一界面；所述第一界面展示有第一图像上所选对象的轮廓线条；所述第一界面为息屏界面；

响应于界面转换的触发事件，以所述第一界面展示的轮廓线条为起始位置向外扩展渲染逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条，以显示出第二界面；所述第二界面展示有所述第二图像；所述第一图像与所述第二图像为相同的图像，在所述第二图像的呈现过程中，所述第二图像上所选对象的呈现优先于所述第二图像上背景的呈现；所述第二界面为锁屏界面，所述触发事件为用于触发从息屏界面切换至锁屏界面的事件。

2.根据权利要求1所述的方法，其特征在于，所述第一界面展示的所述第一图像上所选对象的轮廓线条与所述第二界面展示的所述第二图像上所选对象的轮廓线条位置对应。

3.根据权利要求2所述的方法，其特征在于，所述以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条之前，所述方法还包括：

若所述第一界面展示的所述第一图像上所选对象的轮廓线条的位置与所述第二界面的第二图像上所选对象的轮廓线条不一致，则在所述第一界面上将所述第一图像上所选对象的轮廓线条的位置向所述第二图像上所选对象的轮廓线条的位置对齐。

4.根据权利要求1所述的方法，其特征在于，所述第二图像的呈现速度与所述轮廓线条的淡化速度相适应。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述第一界面位于所述第二界面上方；所述以所述第一界面展示的轮廓线条为起始位置逐渐呈现出第二图像，包括：

基于所述第一界面上各第一像素点与所述轮廓线条的位置关系，确定所述第二界面上各第二像素点的呈现顺序；

从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像。

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

所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：

按照所述呈现顺序调整所述各第一像素点的透明度以呈现所述第二界面上的第二图像；

或者，

所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：

按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述第二界面上各第二像素点的透明度；

或者，

所述第一界面与所述第二界面之间具有图层；所述从所述起始位置开始按照所述呈现顺序呈现所述第二界面上的第二图像，包括：

按照所述呈现顺序提高所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述图层上各第三像素点的透明度。

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

所述按照所述呈现顺序调整所述各第一像素点的透明度以呈现所述第二界面上的第二图像，包括：

按照所述呈现顺序以及第一透明度变化率，提高所述各第一像素点的透明度以呈现所述第二界面上的第二图像；所述第一透明度变化率根据所述各第一像素点与所述轮廓线条表征的所述所选对象的位置关系确定；

或者，

所述按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述第二界面上各第二像素点的透明度，包括：

按照所述呈现顺序和第一透明度变化率提高所述各第一像素点的透明度，以及，按照所述呈现顺序和第二透明度变化率降低所述各第二像素点的透明度；所述第二透明度变化率与所述第一透明度变化率相适应；

或者，

所述按照所述呈现顺序调整所述第一界面上各第一像素点的透明度，并按照所述呈现顺序调整所述图层上各第三像素点的透明度，包括：

按照所述呈现顺序和第一透明度变化率提高所述各第一像素点的透明度，以及，按照所述呈现顺序和第三透明度变化率提高所述各第三像素点的透明度；所述第三透明度变化率与所述第一透明度变化率相适应。

8.根据权利要求7所述的方法，其特征在于，所述第一界面上位于所述第一图像上所选对象对应区域内的第一像素点的第一透明度变化率大于位于所述区域外的第一像素点的第一透明度变化率。

9.根据权利要求8所述的方法，其特征在于，所述在所述第二图像的呈现过程中淡化所述轮廓线条，包括：

在透明度的变化过程中淡化所述轮廓线条。

10.一种界面显示装置，其特征在于，所述装置包括：

第一界面显示模块，用于显示第一界面；所述第一界面展示有第一图像上所选对象的轮廓线条；所述第一界面为息屏界面；

第二界面显示模块，用于响应于界面转换的触发事件，以所述第一界面展示的轮廓线条为起始位置向外扩展渲染逐渐呈现出第二图像，且在所述第二图像的呈现过程中淡化所述轮廓线条，以显示出第二界面；所述第二界面展示有所述第二图像；所述第一图像与所述第二图像为相同的图像，在所述第二图像的呈现过程中，所述第二图像上所选对象的呈现优先于所述第二图像上背景的呈现；所述第二界面为锁屏界面，所述触发事件为用于触发从息屏界面切换至锁屏界面的事件。

11.一种电子设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9中任一项所述方法的步骤。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的方法的步骤。