一种电子设备切换页面的方法和电子设备技术

本申请公开了一种电子设备切换页面的方法和电子设备，属于电子设备技术领域，用于在电子设备从应用的第一界面切换到与第一界面上的控件对应的详情页时，能够体现详情页与控件之间的关联性。电子设备切换页面的方法包括：电子设备显示应用的第一界面，第一界面包括第一控件；响应作用于第一控件的操作，电子设备控制指定区域从初始区域逐渐扩大至第一界面的区域，并且指定区域内的内容的透明化程度过渡至不透明；指定区域内的内容与根据指定区域在第一控件对应的详情页上进行裁切得到的内容相关联，初始区域与第一控件的区域相关联；当指定区域扩大至第一界面的区域时，电子设备显示第二界面，第二界面包括详情页。第二界面包括详情页。第二界面包括详情页。

【技术实现步骤摘要】
一种电子设备切换页面的方法和电子设备


[0001]本申请涉及电子设备
，尤其涉及一种电子设备切换页面的方法和电子设备。

技术介绍

[0002]电子设备上安装有应用。当从应用的第一界面切换到与第一界面上的控件对应的详情页时，详情页的动画效果为：详情页从电子设备的显示界面的侧面进入显示界面后，直接显示在显示界面上。示例性的，如图1中的(a)
‑
图1中的(d)所示，当用户点击列表页面101(第一界面)上的第一列表项102(控件)后，第一列表项102的详情页面104(详情页)从电子设备的显示界面的右侧逐渐进入显示界面。
[0003]但是，详情页的动画效果无法体现出详情页的内容与控件的内容之间的关联性，用户的体验效果较差。

技术实现思路

[0004]本申请实施例提供一种电子设备切换页面的方法和电子设备，用于在电子设备从应用的第一界面切换到与第一界面上的控件对应的详情页时，能够体现详情页与控件之间的关联性。
[0005]为达到上述目的，本申请的实施例采用如下技术方案：
[0006]第一方面，提供了一种电子设备切换页面的方法，包括：电子设备显示应用的第一界面，第一界面包括第一控件；响应作用于第一控件的操作，电子设备控制指定区域从初始区域逐渐扩大至第一界面的区域，并且指定区域内的内容的透明化程度过渡至不透明；指定区域内的内容与根据指定区域在第一控件对应的详情页上进行裁切得到的内容相关联，初始区域与第一控件的区域相关联；当指定区域扩大至第一界面的区域时，电子设备显示第二界面，第二界面包括详情页。
[0007]本申请提供的电子设备切换页面的方法，在从第一界面切换到第一界面上的第一控件对应的详情页的过程中，电子设备在控制指定区域从与第一控件的区域相关联的区域扩大至第一界面的区域时，控制指定区域对第一控件对应的详情页进行裁切，使得指定区域内的内容与详情页的内容相关。同时，电子设备还控制指定区域内的内容的透明化程度过渡至不透明。不透明的指定区域内的内容是可以被用户看到的。这样，详情页的显示区域在从与第一控件相关联的区域逐渐扩大至第一界面的区域的过程中，详情页的内容逐渐呈现给用户，能够体现出详情页是第一界面中的第一控件的延续，从而体现出详情页的内容与第一界面中的第一控件的内容之间的关联性。
[0008]在一种可能的实施方式中，上述初始区域与第一控件的区域相关联，包括：初始区域的位置与第一控件的区域的位置相同，初始区域的形状与第一控件的区域的形状相同。
[0009]在一种可能的实施方式中，上述电子设备控制指定区域从初始区域逐渐扩大至第一界面的区域，并且指定区域内的内容的透明化程度过渡至不透明，包括：
[0010]电子设备生成详情页，并创建与详情页所在图层进行绑定的图层，图层的层级高于详情页所在图层，图层的背景色与第一控件的背景色相同，图层的区域与详情页所在图层的区域相同，且图层包括第一控件的内容；在指定区域从初始区域逐渐扩大至第一界面的区域的过程中，电子设备控制图层逐渐过渡至透明色，使指定区域的内容的透明化程度过渡至不透明。指定区域的内容包括按照指定区域同步地在详情页和图层上进行裁切得到的内容。
[0011]在一种可能的实施方式中，上述在所述指定区域从所述初始区域逐渐扩大至所述第一界面的区域的过程中，所述电子设备控制所述图层缩放。
[0012]在一种可能的实施方式中，上述第一界面还包括第二控件。上述方法还包括：在指定区域从初始区域逐渐扩大至第一界面的区域的过程中，电子设备控制第二控件缩放。
[0013]在显示详情页的过程时，显示第一界面的第二控件的动画效果，能够使页面切换过程中视觉效果更好。
[0014]在一种可能的实施方式中，上述电子设备控制第二控件缩放包括：电子设备控制第二控件基于第一控件的中心进行缩放。
[0015]在一种可能的实施方式中，上述其方法还包括：在指定区域从初始区域逐渐扩大至第一界面的区域的过程中，电子设备控制第二控件移动。
[0016]在一种可能的实施方式中，上述电子设备控制第二控件移动包括：第二控件沿第一界面的长度方向移动。
[0017]在一种可能的实施方式中，上述电子设备控制第二控件移动包括：第二控件沿第一界面的宽度方向移动。
[0018]在一种可能的实施方式中，上述响应作用于第一控件的操作，电子设备控制指定区域从初始区域逐渐扩大至第一页面的区域，并且指定区域内的第一内容逐渐显示出来。第一内容为第一控件对应的详情页按照指定区域进行裁切得到的内容，初始区域与第一控件的区域相关联。
[0019]在一种可能的实施方式中，上述电子设备控制指定区域从初始区域逐渐扩大至第一页面的区域，并且指定区域内的第一内容逐渐显示出来，包括：
[0020]电子设备生成详情页，并创建与详情页所在图层进行绑定的蒙版图层，蒙版图层的层级高于详情页所在图层，蒙版图层的背景色与第一控件的背景色相同，蒙版图层的区域与详情页所在图层的区域相同，且蒙版图层包括第二内容，第二内容为第一控件的内容；在指定区域从初始区域逐渐扩大至第一页面的区域的过程中，电子设备控制第二内容逐渐过渡至透明色，且第一内容逐渐显示出来。
[0021]由于图层与详情页所在图层绑定在一起，因此图层与详情页所在图层的大小和形状可以同步变化。又由于图层的层级高于详情页所在图层，因此在图层逐渐变至透明色的过程中，详情页所在图层可以逐渐显示出来。这样，详情页的内容可以逐渐显示出来。
[0022]第二方面，提供了一种电子设备，包括处理器和存储器，存储器中存储指令，当处理器执行指令时，如第一方面及其任一实施方式所述的方法被执行。
[0023]第三方面，提供了一种计算机可读存储介质，包括指令，当指令在电子设备上运行时，使得电子设备执行如第一方面及其任一实施方式所述的方法。
[0024]第四方面，提供了一种包含指令的计算机程序产品，当指令在上述电子设备上运
行时，使得该电子设备执行如第一方面及其任一实施方式所述的方法。
[0025]第五方面，提供了一种芯片系统，该芯片系统包括处理器，用于支持电子设备实现上述第一方面中所涉及的功能。在一种可能的设计中，该装置还包括接口电路，接口电路可用于从其它装置(例如存储器)接收信号，或者，向其它装置(例如通信接口)发送信号。该芯片系统可以包括芯片，还可以包括其他分立器件。
[0026]第二方面至第五方面的技术效果参照第一方面及其任一实施方式的技术效果，在此不再重复。
附图说明
[0027]图1为本申请实施例提供的从第一界面切换到详情页时的动画效果的示意图之一；
[0028]图2为本申请实施例提供的从第一界面切换到详情页时的动画效果的示意图之二；
[0029]图3为本申请实施例提供的一种电子设备的结构示意图；
[0030]图4为本申请实施例提供的一种电子设备运行的软件架构的示意图；
[0031]图5为本申请实施例提供的一种电子设备切换本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种电子设备切换页面的方法，其特征在于，包括：电子设备显示应用的第一界面，所述第一界面包括第一控件；响应作用于所述第一控件的操作，所述电子设备控制指定区域从初始区域逐渐扩大至所述第一界面的区域，并且所述指定区域内的内容的透明化程度过渡至不透明；所述内容与根据所述指定区域在所述第一控件对应的详情页上进行裁切得到的内容相关联，所述初始区域与所述第一控件的区域相关联；当所述指定区域扩大至所述第一界面的区域时，所述电子设备显示第二界面，所述第二界面包括所述详情页。2.根据权利要求1所述的方法，其特征在于，所述初始区域与所述第一控件的区域相关联，包括：所述初始区域的位置与所述第一控件的区域的位置相同，所述初始区域的形状与所述第一控件的区域的形状相同。3.根据权利要求1或2所述的方法，其特征在于，所述电子设备控制指定区域从初始区域逐渐扩大至所述第一界面的区域，并且所述指定区域内的内容的透明化程度过渡至不透明，包括：所述电子设备生成所述详情页，并创建与所述详情页所在图层进行绑定的图层，所述图层的层级高于所述详情页所在图层，所述图层的背景色与所述第一控件的背景色相同，所述图层的区域与所述详情页所在图层的区域相同，所述图层包括所述第一控件的内容；在所述指定区域从所述初始区域逐渐扩大至所述第一界面的区域的过程中，所述电子设备控制所述图层逐渐过渡至透明色，使所述指定区域内的内容的透明化程度过渡至不透明，所述指定区域内的内容包括按照所述指定区域同步地...

【专利技术属性】
技术研发人员：胡建沛，
申请(专利权)人：荣耀终端有限公司，
类型：发明
国别省市：