CN114640743A - 一种界面动效的显示方法及设备 - Google Patents

一种界面动效的显示方法及设备 Download PDF

Info

Publication number
CN114640743A
CN114640743A CN202011483290.1A CN202011483290A CN114640743A CN 114640743 A CN114640743 A CN 114640743A CN 202011483290 A CN202011483290 A CN 202011483290A CN 114640743 A CN114640743 A CN 114640743A
Authority
CN
China
Prior art keywords
interface
screen
electronic device
state
electronic equipment
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202011483290.1A
Other languages
English (en)
Other versions
CN114640743B (zh
Inventor
卞超
张增
陈晓晓
谷健
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN202011483290.1A priority Critical patent/CN114640743B/zh
Publication of CN114640743A publication Critical patent/CN114640743A/zh
Application granted granted Critical
Publication of CN114640743B publication Critical patent/CN114640743B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了一种界面动效的显示方法及设备,涉及电子设备领域,避免了终端横竖屏切换时显示的动效所呈现的界面存在拉伸或压缩等变形的问题。具体方案为:应用中可以分别预先配置好供电子设备显示的第一界面和第二界面,其中,第一界面和第二界面分别与电子设备的竖屏和横屏对应,当电子设备需要进行竖屏和横屏相互转换时,电子设备可以通过第一界面和第二界面两个界面的转场切换作为界面动效,实现横竖屏界面的切换。

Description

一种界面动效的显示方法及设备
技术领域
本申请涉及电子设备领域,尤其涉及一种界面动效的显示方法及设备。
背景技术
随着终端的不断发展,终端的性能越来越好。为了能够呈现更好的用户界面(userinterface,UI)给用户,基于性能强大的终端,应用的界面越来越复杂,界面之间的转换也变得越来越多。例如,横竖屏切换后横屏界面和竖屏界面之间的转屏动效、不同界面之间的切换(或者说转场)动效等。
在现有技术中,横屏界面和竖屏界面之间的转屏动效,主要是通过对横屏界面或竖屏界面进行旋转,及缩放或拉伸等操作来实现的。示例性的,终端当前处于竖屏状态,用户通过旋转终端,使终端的屏幕转动90度,终端可由竖屏状态转换为横屏状态。其中,终端在竖屏状态下显示的竖屏界面会跟随终端的屏幕旋转90度。如,在终端由竖屏状态转换为横屏状态后,终端可呈现由竖屏界面到横屏界面的转屏动效。例如,结合图1,如图1中的(a)所示,在用户通过旋转终端,使终端由竖屏状态转换为横屏状态后,在横屏状态下,终端可先显示竖屏界面101。之后,终端启动转屏动效,如终端将该竖屏界面101以与终端屏幕的转动方向相反的方向旋转90度,旋转后的显示效果可如图1中的(b)所示。在竖屏界面101旋转的同时,如图1中的(c)所示,终端可对旋转后的竖屏界面101进行拉伸,以将旋转后的竖屏界面101转换成与终端横屏状态相匹配的横屏界面102。
目前这种横竖屏切换时的转屏动效需要对应用的界面进行拉伸或压缩,因此很容易造成横竖屏切换时的转屏动效所呈现的界面存在拉伸、压缩等变形的问题。
发明内容
本申请实施例提供一种界面动效的显示方法及设备,解决了终端横竖屏切换时的动效所呈现的界面存在拉伸、压缩等变形的问题。
为了达到上述目的,本申请实施例采用如下技术方案:
第一方面,本申请实施例提供一种界面动效的显示方法,该方法可应用于电子设备,该电子设备可以包括第一状态和第二状态。该方法包括:电子设备在处于第一状态的情况下显示第一界面,其中,第一界面的布局信息与第一状态的屏幕属性对应。当电子设备接收到用户的状态切换操作时,电子设备可以由第一状态切换至第二状态。此时,电子设备可以显示由第一界面切换至第二界面的动效。其中,第二界面的布局信息与第二状态的屏幕属性对应。第一状态为横屏状态,第二状态为竖屏状态;或第一状态为竖屏状态,第二状态为横屏状态。
采用上述技术方案,在用户对电子设备进行状态切换操作(如,将电子设备的屏幕由竖屏转动为横屏)时,电子设备可以将状态切换前显示的第一界面通过动效切换至第二界面。由于第二界面的布局信息与电子设备状态切换后的状态的屏幕属性(即屏幕方向、尺寸等)相对应,因此,电子设备显示的第一界面切换至第二界面的动效,可以避免对第二界面和第一界面的压缩或拉伸,从而避免电子设备显示的动效存在拉伸或压缩等变形的问题,减少用户产生花屏、截屏等错觉,使得电子设备显示的界面在电子设备状态切换时能够更加流畅、连读和协调的转换,提升用户体验。
在一种可能的实现方式中,该方法还可以包括:电子设备获取第二界面中各元素的类型(如电子设备通过对第二界面中各元素的智能识别,获取各元素的类型);电子设备根据所述第二界面中各元素的类型以及预定的不同类型的主次关系,调整所述第二界面中各元素的布局。这样,电子设备能够按照第二界面中各元素不同类型的主次关系,对第二界面中各元素的布局进行调整,以使第二界面中各元素的布局能够更加符合对应的第二状态的屏幕属性,使电子设备显示的第二界面更易于用户使用。
在另一种可能的实现方式中,该方法还可以包括:电子设备根据第二界面中各元素预定的主次关系(如,第二界面对应的应用中预先定义配置的第二界面各元素的主次关系),调整所述第二界面中各元素的布局。这样,电子设备能够按照第二界面中各元素定义好的主次关系,对第二界面中各元素的布局进行调整,以使第二界面中各元素的布局能够更加符合对应的第二状态的屏幕属性,使电子设备显示的第二界面更易于用户使用。
在另一种可能的实现方式中,电子设备显示由第一界面切换至第二界面的动效,可以包括:电子设备显示第一界面的离场动效,显示第二界面的入场动效。
在另一种可能的实现方式中,电子设备显示第一界面的离场动效,可以包括:电子设备将第一界面和第三界面进行拼接,获得第四界面;电子设备显示第四界面的离场动效。这样,使电子设备显示第一界面离场时,在屏幕显示区域内,第一界面以外的部分能够被第三界面所填充,从而使电子设备在显示第一界面的离场动效时屏幕能够始终被画面填充,减小用户产生离场时的第一界面在屏幕内被裁切的错觉,提高用户体验。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。这样,能够使第三界面与第一界面颜色相近,从而提高第一界面和第三界面拼接后(即第四界面)的视觉统一性,提高用户体验。
在另一种可能的实现方式中,第三界面拼接在第一界面的第一方向上,第一方向与由第一状态切换到第二状态电子设备的转动方向相反(如,电子设备向左转动以切换状态,则第一方向为第一界面的右侧方向等)。
在另一种可能的实现方式中,显示第二界面的入场动效,可以包括:电子设备将第二界面和第五界面进行拼接,获得第六界面;电子设备显示第六界面的离场动效。这样,使电子设备显示第二界面入场时,在屏幕显示区域内,第二界面以外的部分能够被第五界面所填充,从而使电子设备在显示第二界面的入场动效时屏幕能够始终被画面填充,减小用户产生入场时的第二界面在屏幕内被裁切的错觉,提高用户体验。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。这样,能够使第五界面与第二界面颜色相近,从而提高第二界面和第五界面拼接后(即第六界面)的视觉统一性,提高用户体验。
在另一种可能的实现方式中,第五界面拼接在第二界面的第二方向上,第二方向与由第一状态切换到第二状态电子设备的转动方向相反(如,电子设备向左转动以切换状态,则第二方向为第二界面的右侧方向等)。
在另一种可能的实现方式中,所述第五界面包括所述第二界面的一个或多个元素。例如,第五界面可以包括第二界面中的控件、图像等元素。这样,能够使第五界面与第二界面在视觉上更加统一,并且在显示第二界面的入场动效时,可增强第二界面和第五界面间的延续感。
第二方面,本申请实施例提供一种界面动效的显示装置,该装置可以应用于电子设备,用于实现上述第一方面中的方法。该装置的功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块,例如,显示模块和处理模块等。
其中,显示模块,可以用于在处于第一状态的情况下显示第一界面,第一界面的布局信息与第一状态的屏幕属性对应;处理模块,可以用于接收到用户的状态切换操作,由第一状态切换至第二状态;显示模块,还可以用于显示由第一界面切换至所述第二界面的动效;第二界面的布局信息与第二状态的屏幕属性对应;其中,第一状态为横屏状态,第二状态为竖屏状态;或第一状态为竖屏状态,第二状态为横屏状态。
在一种可能的实现方式中,处理模块,还用于获取第二界面中各元素的类型;根据第二界面中各元素的类型以及预定的不同类型的主次关系,调整第二界面中各元素的布局。
在另一种可能的实现方式中,处理模块,还用于根据第二界面中各元素预定的主次关系,调整第二界面中各元素的布局。
在另一种可能的实现方式中,显示模块,具体用于显示第一界面的离场动效,显示第二界面的入场动效。
在另一种可能的实现方式中,处理模块,还用于将第一界面和第三界面进行拼接,获得第四界面;显示模块,具体用于显示第四界面的离场动效。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第三界面拼接在第一界面的第一方向上,第一方向与由第一状态切换到第二状态电子设备的转动方向相反。
在另一种可能的实现方式中,处理模块,具体用于将第二界面和第五界面进行拼接,获得第六界面;显示模块,具体用于显示第六界面的离场动效。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第五界面拼接在第二界面的第二方向上,第二方向与由第一状态切换到第二状态电子设备的转动方向相反。
在另一种可能的实现方式中,第五界面包括第二界面的一个或多个元素。
第三方面,本申请实施例提供一种电子设备,包括:处理器,用于存储该处理器可执行指令的存储器。该处理器被配置为执行上述指令时,使得该电子设备实现如第一方面或第一方面的可能的实现方式中任一项所述的界面动效的显示方法。
第四方面,本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序指令。当计算机程序指令被电子设备执行时,使得电子设备实现如第一方面或第一方面的可能的实现方式中任一项所述的界面动效的显示方法。
第五方面,本申请实施例提供一种计算机程序产品,包括计算机可读代码,当所述计算机可读代码在电子设备中运行时,使得电子设备实现如第一方面或第一方面的可能的实现方式中任一项所述的界面动效的显示方法。
应当理解的是,上述第二方面至第五方面的有益效果可以参见上述第一方面中的相关描述,在此不再赘述。
第六方面,本申请实施例提供一种界面动效的显示方法,该方法可应用于投屏***的第一电子设备,投屏***还可以包括第二电子设备。其中,第一电子设备处于第一状态,第二电子设备处于第二状态。第一状态为横屏状态,第二状态为竖屏状态;或第一状态为竖屏状态,第二状态为横屏状态。该方法可以包括:第一电子设备显示第一界面,其中,第一界面的布局信息与所述第一状态的屏幕属性对应;接收到用户的投屏操作,第一电子设备显示第一界面的离场动效;第一电子设备向第二电子设备发送第二界面的入场动效数据,以使第二电子设备显示第二界面的入场动效,其中,第二界面的布局信息与第二状态的屏幕属性对应。
采用上述技术方案,在用于对第一电子设备显示的界面向第二电子设备投屏时,第一电子设备可以显示第一界面的离场动效,以及向第二电子设备发送相应的第二界面入场动效数据以使第二电子设备显示相应的动效,从而使第一电子设备和第二电子设备间投屏时的界面切换更加有延续感。并且,由于第二界面的布局信息与第二电子设备的屏幕属性(即第二状态的屏幕属性)对应,因此通过上述技术方案,能够避免第二电子设备显示的界面出现拉伸或压缩等变形问题,使得投屏过程更加流程、协调,提升用户体验。
在一种可能的实现方式中,该方法还可以包括:第一电子设备获取第二界面中各元素的类型(如第一电子设备通过对第二界面中各元素的智能识别,获取各元素的类型);第一电子设备根据第二界面中各元素的类型以及预定的不同类型的主次关系,向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。这样,第一电子设备能够按照第二界面中各元素不同类型的主次关系,对第二界面中各元素的布局进行调整,以使第二电子设备显示的第二界面中各元素的布局能够更加符合其屏幕显示,使第二电子设备显示的第二界面更易于用户使用。
在另一种可能的实现方式中,该方法还可以包括:第一电子设备根据第二界面中各元素预定的主次关系(如,第二界面对应的应用中预先定义配置的第二界面各元素的主次关系),向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。这样,能够使第二电子设备显示的第二界面中各元素的布局能够更加符合其屏幕显示,使第二电子设备显示的第二界面更易于用户使用。
在另一种可能的实现方式中,第一电子设备显示第一界面的离场动效,可以包括:第一电子设备将第一界面和第三界面进行拼接,获得第四界面;第一电子设备显示第四界面的离场动效。这样,使第一电子设备显示第一界面离场时,在屏幕显示区域内,第一界面以外的部分能够被第三界面所填充,从而使第一电子设备在显示第一界面的离场动效时屏幕能够始终被画面填充,减小用户产生离场时的第一界面在屏幕内被裁切的错觉,提高用户体验。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。这样,能够使第三界面与第一界面颜色相近,从而提高第一界面和第三界面拼接后(即第四界面)的视觉统一性,提高用户体验。
在另一种可能的实现方式中,第一电子设备向第二电子设备发送第二界面的入场动效数据,可以包括:第一电子设备将第二界面和第五界面进行拼接,获得第六界面;第一电子设备向第二电子设备发送第六界面的入场动效数据。这样,使第二电子设备显示第二界面入场时,在屏幕显示区域内,第二界面以外的部分能够被第五界面所填充,从而使第二电子设备在显示第二界面的入场动效时屏幕能够始终被画面填充,减小用户产生入场时的第二界面在屏幕内被裁切的错觉,提高用户体验。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。这样,能够使第五界面与第二界面颜色相近,从而提高第二界面和第五界面拼接后(即第六界面)的视觉统一性,提高用户体验。
在另一种可能的实现方式中,第五界面包括第二界面的一个或多个元素。例如,第五界面可以包括第二界面中的控件、图像等元素。这样,能够使第五界面与第二界面在视觉上更加统一,并且在显示第二界面的入场动效时,可增强第二界面和第五界面间的延续感。
第七方面,本申请实施例提供一种界面动效的显示装置,该装置可以应用于电子设备(如,第一电子设备),用于实现上述第六方面中的方法。该装置的功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块,例如,显示模块、发送模块和处理模块等。
其中,显示模块,可以用于显示第一界面,第一界面的布局信息与第一状态的屏幕属性对应;显示模块,还可以用于接收到用户的投屏操作,显示第一界面的离场动效;发送模块,可以用于向第二电子设备发送第二界面的入场动效数据,以使第二电子设备显示第二界面的入场动效,第二界面的布局信息与第二状态的屏幕属性对应。
在一种可能的实现方式中,处理模块,可以用于获取第二界面中各元素的类型;发送模块,还可以用于根据第二界面中各元素的类型以及预定的不同类型的主次关系,向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。
在另一种可能的实现方式中,发送模块,还可以用于根据第二界面中各元素预定的主次关系,向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。
在另一种可能的实现方式中,处理模块,还可以用于将第一界面和第三界面进行拼接,获得第四界面;显示模块,具体用于显示第四界面的离场动效。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,处理模块,还可以用于将第二界面和第五界面进行拼接,获得第六界面;发送模块,具体用于向所述第二电子设备发送所述第六界面的入场动效数据。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第五界面包括第二界面的一个或多个元素。
第八方面,本申请实施例提供一种电子设备,包括:处理器,用于存储该处理器可执行指令的存储器。该处理器被配置为执行上述指令时,使得该电子设备实现如第六方面或第六方面的可能的实现方式中任一项所述的界面动效的显示方法。
第九方面,本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序指令。当计算机程序指令被电子设备执行时,使得电子设备实现如第六方面或第六方面的可能的实现方式中任一项所述的界面动效的显示方法。
第十方面,本申请实施例提供一种计算机程序产品,包括计算机可读代码,当所述计算机可读代码在电子设备中运行时,使得电子设备实现如第六方面或第六方面的可能的实现方式中任一项所述的界面动效的显示方法。
应当理解的是,上述第七方面至第十方面的有益效果可以参见上述第六方面中的相关描述,在此不再赘述。
附图说明
图1为现有技术提供的一种界面动效的显示方法应用时的界面示意图;
图2为本申请实施例提供的一种界面动效的显示方法的应用场景图;
图3为本申请实施例提供的另一种界面动效的显示方法的应用场景图;
图4为本申请实施例提供的一种电子设备的组成示意图;
图5为本申请实施例提供的一种界面动效的显示方法应用时的界面示意图;
图6为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图7为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图8为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图9为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图10为本申请实施例提供的一种界面动效的显示方法的实现框架示意图;
图11为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图12为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图13为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图14为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图15为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图16为本申请实施例提供的另一种界面动效的显示方法应用时的界面示意图;
图17为本申请实施例提供的一种界面动效的显示装置的结构示意图;
图18为本申请实施例提供的另一种界面动效的显示装置的结构示意图。
具体实施方式
随着终端(或者说电子设备)的不断发展,电子设备的性能越来越好。为了能够呈现更好的UI给用户,基于性能强大的电子设备,应用的界面越来越复杂,界面之间的转换也变得越来越多。例如,横竖屏切换后横屏界面和竖屏界面之间的转屏动效、不同界面之间的切换(或者说转场)动效等。
其中,电子设备的屏幕通常具有横屏状态和竖屏状态两种屏幕状态,在电子设备为竖屏状态时,电子设备显示的是应用的竖屏界面,当电子设备为横屏状态时,电子设备显示的是应用的横屏界面,从而使电子设备在竖屏状态和横屏状态均能够向用户呈现应用界面的正常视角,使得用户能够正常浏览应用界面。本申请实施例中的第一状态可以为横屏状态或竖屏状态,当第一状态是横屏状态时,本申请实施例中的第二状态是竖屏状态,第一界面是横屏界面,第二界面是竖屏界面;当第一状态是竖屏状态时,本申请实施例中的第二状态是横屏状态,第一界面是竖屏界面,第二界面是横屏界面。
需要说明的是,一般电子设备的屏幕形状为长方形,因此电子设备的屏幕状态中,横屏状态通常为屏幕底部(屏幕底部为重力加速度方向所指的一侧,即屏幕靠近地面的一侧)为长边时电子设备所处的状态。竖屏状态通常为屏幕底部为短边时电子设备所处的状态。或者,电子设备的屏幕与正在使用屏幕的用户的下颌或额头所对应的一侧为长边时,则电子设备处于横屏状态;电子设备的屏幕与正在使用屏幕的用户的下颌或额头所对应的一侧为短边时,则电子设备处于竖屏状态。
其中,在相关技术中,横屏界面和竖屏界面之间的转屏动效,主要是通过对横屏界面或竖屏界面进行旋转,及缩放或拉伸等操作来实现的。例如,当电子设备处于竖屏状态并显示竖屏界面时,用户通过旋转电子设备,使电子设备转动一定角度后由竖屏状态转换为横屏状态。随后,电子设备呈现由竖屏界面转换为横屏界面的转屏动效。该转屏动效可以为对竖屏界面的旋转以及对旋转后的竖屏界面的横向拉伸,以旋转并横向拉伸后的竖屏界面作为横屏界面。
可以看到,采用上述方式实现横屏界面和竖屏界面之间的转屏动效,竖屏界面转换为横屏界面时,转屏动效会呈现竖屏界面被拉伸的过程。同理,横屏界面转换为竖屏界面时,转屏动效会呈现横屏界面被压缩的过程。导致电子设备在显示转屏动效时,转屏动效所呈现的界面存在拉伸或压缩等变形的问题,并且,可能会给用户造成花屏、截屏等错觉,影响用户体验。
为解决上述问题,本申请实施例提供一种界面动效的显示方法,该方法可以应用于具有显示屏的电子设备进行显示界面的横竖屏切换的场景中。例如,图2示出了一种界面动效的显示方法的应用场景。电子设备由如图2中的(a)所示的竖屏状态转换为如图2中的(b)所示的横屏状态时,电子设备的显示界面由竖屏界面201将转换为横屏界面202。
或者该方法还可以应用于至少两个具有显示屏的电子设备相互投屏时的横竖屏切换的场景中。例如,图3示出了另一种界面动效的显示方法的应用场景。如图3所示,相互通信连接的第一电子设备301和第二电子设备302中,第一电子设备301处于竖屏状态,其显示界面为竖屏界面303,而第二电子设备302通常处于横屏状态。第一电子设备301将其显示界面(如竖屏界面303)向第二电子设备302投屏时,第一电子设备301的竖屏界面303在第二电子设备302上将转换为横屏界面304。
在本实施例中,应用中可以分别预先配置好供电子设备显示的横屏界面和竖屏界面(或者说配置有与电子设备的竖屏状态的屏幕属性对应的竖屏界面,如第一界面、与横屏状态的屏幕属性对应的横屏界面,如第二界面。其中,屏幕属性可以是指对应状态下屏幕的方向、尺寸等),当横屏界面和竖屏界面需要相互转换时,电子设备可以通过两个界面的转场切换作为界面动效(或者说转屏动效),实现横竖屏界面的切换。
如此,可以避免在横屏界面和竖屏界面相互转换时,对横屏界面或竖屏界面进行压缩或拉伸,从而避免电子设备在显示转屏动效时,转屏动效所呈现的界面存在拉伸或压缩等变形的问题,以免给用户造成花屏、截屏等错觉,使得横屏界面和竖屏界面之间的转换能够更加流畅、连读和协调,提升用户体验。
在本申请实施例中,上述电子设备可以是手机、平板电脑、具有显示功能的可穿戴设备(如:智能手表、智能手环)、电视机、车机(如车载电脑)、笔记本电脑、增强现实(augmented reality,AR)/虚拟现实(virtual reality,VR)设备等。本申请实施例对电子设备的具体形态不做特殊限制。需要说明的是,以上电子设备还可以组合使用,即如图3所示的场景。例如,手机上显示某个应用的竖屏界面,当手机将该应用的显示界面向智慧屏投屏时,手机显示的竖屏界面在智慧屏上将转换为横屏界面。或者,手机上显示某个应用的竖屏界面,当手机将该应用的显示界面向车机投屏时,手机显示的竖屏界面在车机上将转换为横屏界面等。
图4示出了本申请实施例提供的一种电子设备的结构示意图。
如图4所示,电子设备可以包括处理器410,外部存储器接口420,内部存储器421,通用串行总线(universal serial bus,USB)接口430,充电管理模块440,电源管理模块441,电池442,天线1,天线2,移动通信模块450,无线通信模块460,音频模块470,扬声器470A,受话器470B,麦克风470C,耳机接口470D,传感器模块480,按键490,马达491,指示器492,摄像头493,显示屏494,以及用户标识模块(subscriber identification module,SIM)卡接口495等。其中,传感器模块480可以包括压力传感器480A,陀螺仪传感器480B,气压传感器480C,磁传感器480D,加速度传感器480E,距离传感器480F,接近光传感器480G,指纹传感器480H,温度传感器480J,触摸传感器480K,环境光传感器480L,骨传导传感器480M等。
可以理解的是,本实施例示意的结构并不构成对电子设备的具体限定。在另一些实施例中,电子设备可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器410可以包括一个或多个处理单元,例如:处理器410可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
控制器可以是电子设备的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器410中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器410中的存储器为高速缓冲存储器。该存储器可以保存处理器410刚用过或循环使用的指令或数据。如果处理器410需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器410的等待时间,因而提高了***的效率。
在一些实施例中,处理器410可以包括一个或多个接口。接口可以包括集成电路(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)接口等。
充电管理模块440用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。在一些有线充电的实施例中,充电管理模块440可以通过USB接口430接收有线充电器的充电输入。在一些无线充电的实施例中,充电管理模块440可以通过电子设备的无线充电线圈接收无线充电输入。充电管理模块440为电池442充电的同时,还可以通过电源管理模块441为电子设备供电。
电源管理模块441用于连接电池442,充电管理模块440与处理器410。电源管理模块441接收电池442和/或充电管理模块440的输入,为处理器410,内部存储器421,外部存储器,显示屏494,摄像头493,和无线通信模块460等供电。电源管理模块441还可以用于监测电池容量,电池循环次数,电池健康状态(漏电,阻抗)等参数。在其他一些实施例中,电源管理模块441也可以设置于处理器410中。在另一些实施例中,电源管理模块441和充电管理模块440也可以设置于同一个器件中。
电子设备的无线通信功能可以通过天线1,天线2,移动通信模块450,无线通信模块460,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块450可以提供应用在电子设备上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块450可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块450可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块450还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块450的至少部分功能模块可以被设置于处理器410中。在一些实施例中,移动通信模块450的至少部分功能模块可以与处理器410的至少部分模块被设置在同一个器件中。
无线通信模块460可以提供应用在电子设备上的包括无线局域网(wirelesslocal area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星***(global navigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。无线通信模块460可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块460经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器410。无线通信模块460还可以从处理器410接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,电子设备的天线1和移动通信模块450耦合,天线2和无线通信模块460耦合,使得电子设备可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯***(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(code divisionmultiple access,CDMA),宽带码分多址(wideband code division multiple access,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位***(global positioning system,GPS),全球导航卫星***(globalnavigation satellite system,GLONASS),北斗卫星导航***(beidou navigationsatellite system,BDS),准天顶卫星***(quasi-zenith satellite system,QZSS)和/或星基增强***(satellite based augmentation systems,SBAS)。
电子设备通过GPU,显示屏494,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏494和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器410可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏494用于显示图像,视频等。显示屏494包括显示面板。显示面板可以采用液晶显示屏(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)等。在一些实施例中,电子设备可以包括1个或N个显示屏494,N为大于1的正整数。
电子设备可以通过ISP,摄像头493,视频编解码器,GPU,显示屏494以及应用处理器等实现拍摄功能。在一些实施例中,电子设备可以包括1个或N个摄像头493,N为大于1的正整数。
NPU为神经网络(neural-network,NN)计算处理器,通过借鉴生物神经网络结构,例如借鉴人脑神经元之间传递模式,对输入信息快速处理,还可以不断的自学习。通过NPU可以实现电子设备的智能认知等应用,例如:图像识别,人脸识别,语音识别,文本理解等。
内部存储器421可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。处理器410通过运行存储在内部存储器421的指令,从而执行电子设备的各种功能应用以及数据处理。内部存储器421可以包括存储程序区和存储数据区。其中,存储程序区可存储操作***,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储电子设备使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器421可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。
电子设备可以通过音频模块470,扬声器470A,受话器470B,麦克风470C,耳机接口470D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
陀螺仪传感器480B可以用于确定电子设备的运动姿态。在一些实施例中,可以通过陀螺仪传感器480B确定电子设备围绕三个轴(即,x,y和z轴)的角速度。陀螺仪传感器480B可以用于拍摄防抖。示例性的,当按下快门,陀螺仪传感器480B检测电子设备抖动的角度,根据角度计算出镜头模组需要补偿的距离,让镜头通过反向运动抵消电子设备的抖动,实现防抖。陀螺仪传感器480B还可以用于导航,体感游戏场景。在本申请实施例中,陀螺仪传感器480B还可以用于检测电子设备的横竖屏状态,使电子设备可以根据横竖屏状态判断是否需要进行横竖屏界面的转换。例如,陀螺仪传感器480B检测到电子设备由竖屏状态变成了横屏状态,则电子设备将竖屏界面转换为横屏界面。
当然,可以理解的,上述图4所示仅仅为电子设备的形态为手机时的示例性说明。若电子设备是平板电脑,手持计算机,PC,PDA,可穿戴式设备(如:智能手表、智能手环),智能家居设备(如:电视机),车机(如:车载电脑),智慧屏,游戏机以及AR/VR设备等其他设备形态时,电子设备的结构中可以包括比图4中所示更少的结构,也可以包括比图4中所示更多的结构,在此不作限制。
以下实施例中的方法均可以在具有上述硬件结构的电子设备中实现。
在本申请实施例中,电子设备中支持横竖屏界面转换的应用,均提前配置有其不同界面相对应的竖屏界面和横屏界面。例如,电子设备中的第一应用的应用界面,如称为第一应用界面,分别配置有用于在竖屏状态下显示的竖屏界面,以及用于在横屏状态下显示横屏界面。
需要说明的是,应当理解,电子设备显示的应用界面由竖屏界面转换为横屏界面,和由横屏界面转换为竖屏界面的过程是互为逆序的,两者具有相似的转换过程可相互参考。以下结合附图,以电子设备当前显示第一应用的第一应用界面的竖屏界面,第一应用界面由竖屏界面切换至横屏界面为例,对该界面动效的显示方法的具体实现进行详细介绍。
在本申请实施例中,电子设备会对其屏幕状态为横屏状态还是竖屏状态进行检测,从而判断电子设备的屏幕状态是否发生变更,若变更,则显示转屏动效以进行横竖屏界面的转换。例如,电子设备当前处于竖屏状态,其当前显示的界面为第一应用界面的竖屏界面。当用户使电子设备的屏幕转动一定角度,如90度时,电子设备可检测到屏幕状态变更成横屏状态,此时,电子设备显示第一应用界面由竖屏界面向横屏界面转换的转屏动效(或者在本申请实施例中还可称为由竖屏界面切换至横屏界面的动效)。
通常电子设备处于横屏状态下的屏幕与处于竖屏状态下的屏幕相互垂直,或者说通过对某一状态下的屏幕旋转90度可使其与另一状态下的屏幕重合。所以,通常电子设备(如手机)在转动一定角度时,例如90度、270等时,电子设备的屏幕状态会发生变更。当然,上述角度的示例仅为参考,在其他一些可能的实施例中,电子设备转动的角度在上述示例角度的预设浮动范围内也可以确定电子设备的屏幕状态发生了变更。例如,上述的预设浮动范围为±10度,则电子设备由竖屏状态转动95度后,其屏幕底部并非水平(或者说稍有倾斜),但也可确定出其屏幕状态已变更为横屏状态。
其中,当电子设备的横屏状态和竖屏状态,是根据其屏幕底部为长边还是短边进行判断时,在一些实施例中,电子设备检测屏幕状态为横屏状态还是竖屏状态可以通过重力传感器实现。示例地,电子设备通过重力传感器检测重力加速度的方向,根据重力加速度的方向确定电子设备的屏幕底部为短边还是长边,即通过判断重力加速度方向所指的一侧是屏幕的短边还是长边。若屏幕底部为短边,则电子设备可以确定屏幕处于竖屏状态,若屏幕底部为长边,则电子设备可以确定屏幕处于横屏状态。
当电子设备的横屏状态和竖屏状态,是根据其屏幕与正在使用屏幕的用户的下颌或额头所对应的一侧为长边还是短边进行判断时,在一些实施例中,电子设备检测屏幕状态为横屏状态还是竖屏状态可以通过其位于屏幕一侧的摄像头(如前置摄像头)实现。示例地,电子设备通过前置摄像头获取用户使用屏幕时的面部图像,根据该面部图像电子设备可以确定屏幕的长边与用户的下颌或额头相对应,还是短边与用户的下颌或额头相对应。若屏幕的短边与用户的下颌或额头相对应,则电子设备可以确定屏幕处于竖屏状态,若屏幕的长边与用户的下颌或额头相对应,则电子设备可以确定屏幕处于横屏状态。
在本申请实施例中,在电子设备检测到其屏幕状态由竖屏状态变更为横屏状态后,电子设备可进行横竖屏界面的转换。示例地,如图5中的(a)所示,电子设备的屏幕500当前处于竖屏状态显示竖屏界面501,用户可以通过旋转电子设备使其屏幕500转动90度,从而使屏幕状态由竖屏状态转换为横屏状态(如图5中的(b)所示)。此时,如图5中的(c)所示,电子设备检测到屏幕状态由竖屏状态变更成了横屏状态,电子设备根据第一应用中第一应用界面的配置可获取对应的横屏界面502。之后,电子设备可显示第一应用界面由竖屏界面501向横屏界面502转换的转屏动效。如,电子设备以旋转淡出的方式展示第一应用界面的竖屏界面501(即显示竖屏界面501的旋转淡出动效),以旋转淡入的方式展示上述第一应用界面的横屏界面502(即显示横屏界面502的旋转淡入动效),以使电子设备显示的界面最终由第一应用界面的竖屏界面501转换为横屏界面502(如图5中的(d)所示)。又如,电子设备显示的转屏动效,还可以是显示竖屏界面的飞出动效,以及显示横屏界面的飞入动效等。在本申请中对于转屏动效的具体方式不做限制。其中,旋转淡出动效和飞出动效即为竖屏界面的离场动效,旋转淡入动效和飞入动效即为横屏界面的入场动效。
其中,竖屏界面的旋转淡出可以是指竖屏界面在保持大小不变(或者说不进行压缩或拉伸)的情况下进行旋转,并且其透明度由100%逐渐减小到0%。横屏界面的旋转淡入可以是指横屏界面在保持大小不变(或者说不进行压缩或拉伸)的情况下进行旋转,并且其透明度由0%逐渐增加到100%。其中,上述透明度100%仅为示例,其具体可根据竖屏界面和横屏界面分别正常显示时的透明度来确定。例如,竖屏界面和横屏界面正常显示时的透明度均为50%,则相应地,竖屏界面旋转淡出时其透明度是由50%逐渐减小到0%,横屏界面旋转淡入时其透明度是由0%逐渐增加到50%。又例如,竖屏界面正常显示时的透明度为75%,横屏界面正常显示时的透明度为50%,则相应地,竖屏界面旋转淡出时其透明度是由75%逐渐减小到0%,横屏界面旋转淡入时其透明度是由0%逐渐增加到50%。
其中,竖屏界面的旋转中心以及横屏界面的旋转中心可以分别根据所需的旋转效果进行设置,并且两个旋转中心可以相同也可以不相同,此处不做限制。示例地,竖屏界面的旋转中心和横屏界面的旋转中心相同,如图6所示,旋转中心可以为竖屏界面601的几何中心(如图6中的a点所示),并且随着竖屏界面和横屏界面的转动,该旋转中心沿图6中所示虚线移动,转动结束时该旋转中心移动至图6中所示的b点处。或者,竖屏界面以及横屏界面的旋转中心还可以是两者重合部分的几何中心。
需要说明的是,如图5所示,电子设备在对上述竖屏界面501的旋转淡出以及横屏界面502的旋转淡入进行显示时,受限于电子设备的屏幕500的显示区域大小和比例,竖屏界面和横屏界面只有位于屏幕500的显示区域内的部分对用户来说是可见的,因此,随着竖屏界面501和横屏界面502的旋转,竖屏界面501的可见部分逐渐减少,横屏界面502的可见部分逐渐增加。
其中,在一些实施例中,电子设备可以异步显示竖屏界面的旋转淡出的动效以及横屏界面的旋转淡入的动效。例如,当显示竖屏界面的旋转淡出动效的过程中竖屏界面的透明度减小到原界面的一半时,例如透明度减小到50%时,再显示横屏界面的旋转淡入的动效。或者,在另一些实施例中,电子设备还可以对竖屏界面的旋转淡出动效和横屏界面的旋转淡入动效同时显示。或者,在另一些实施例中,电子设备还可以在显示完竖屏界面的旋转淡出动效之后再显示横屏界面的旋转淡入动效。在本申请实施例中对于竖屏界面的旋转淡出动效和横屏界面的旋转淡入动效的显示顺序不做限制。
其中,在竖屏界面的旋转淡出动效中,竖屏界面由其初始位置开始转动。例如,竖屏界面的初始位置为其在屏幕中正常显示时的位置。同理,横屏界面也由其初始位置开始旋转。并且,由于电子设备的横屏状态和竖屏状态两种状态下屏幕相互垂直,因此,如图7所示,竖屏界面701的初始位置和横屏界面702的初始位置之间可以相互垂直设置。使得竖屏界面和横屏界面能够以转动相同的角度完成出场或入场,从而保证竖屏界面和横屏界面转动幅度的统一性,减小竖屏界面旋转淡出的动效和横屏界面旋转淡入的动效之间的差异,提高用户体验。
示例地,以竖屏界面在初始位置时的尺寸为2340×1080,横屏界面在初始位置时的尺寸为1080×2340为例(其中,竖屏界面的尺寸和横屏界面的尺寸均始终以宽×高的形式表示)。当电子设备由竖屏状态变更为横屏状态时(例如电子设备以其屏幕所在平面为基准面转动90度时),当前电子设备显示的竖屏界面位于初始位置,电子设备显示竖屏界面的旋转淡出动效具体可以为,该竖屏界面从初始位置开始旋转,此时竖屏界面的尺寸为初始位置时的2340×1080。当竖屏界面以与电子设备的转动方向相反的方向旋转90度并停止旋转之后,竖屏界面的尺寸为1080×2340。同理,电子设备显示横屏界面的旋转淡入动效具体可以为,该横屏界面从初始位置开始旋转,此时横屏界面的尺寸为初始位置时的1080×2340。当横屏界面以与电子设备的转动方向相反的方向旋转90度并停止旋转之后,横屏界面的尺寸为2340×1080。
在以上示例呈现转屏动效的过程中,竖屏界面和横屏界面可以是配置好的第一应用界面的竖屏界面和横屏界面,例如图5中的竖屏界面501和横屏界面502。为了提高竖屏界面和横屏界面旋转切换时的协调性和统一性,以及电子设备屏幕内显示内容的完整性,提高用户体验,在一些可能的实施例中,电子设备还可以分别对该竖屏界面和该横屏界面进行补全,以形成补全后的竖屏界面和补全后的横屏界面。补全后的竖屏界面(或者还可称为第四界面)和补全后的横屏界面(或者还可称为第六界面)分别在上述初始位置能够相互重叠。即,在本实施例中,电子设备可以在检测到屏幕状态由竖屏状态转换成横屏状态后,显示转屏动效,该转屏动效具体可以为:显示补全后的竖屏界面的旋转淡出效果,以及显示补全后的横屏界面的旋转淡入效果。由于补全后的竖屏界面和补全后的横屏界面在初始位置时相互重叠,因此当补全后的竖屏界面和补全后的横屏界面旋转时,旋转效果更加接近,从而可以提高竖屏界面和横屏界面旋转切换时的协调性和统一性。并且,当补全后的竖屏界面和补全后的横屏界面旋转时,屏幕的显示区域内,竖屏界面和横屏界面以外的区域能够显示出竖屏界面和横屏界面被补全的部分。从而使横屏界面和竖屏界面切换时,相应的画面可始终充满屏幕的显示区域,减小用户产生横屏界面和竖屏界面在屏幕内被裁切的错觉,提高用户体验。
示例地,电子设备在展示竖屏界面的旋转淡出过程之前,以及在展示横屏界面的旋转淡入动效之前,可以通过补全界面分别对竖屏界面以及横屏界面进行拼接,以得到补全后的竖屏界面和补全后的横屏界面(其中,对竖屏界面进行拼接的补全界面还可以称为第三界面,对横屏界面进行补全的界面还可以称为第五界面)。例如,电子设备的屏幕长宽比近似为2:1,则如图8所示,可以通过在位于初始位置的竖屏界面801的一侧拼接补全界面802,以使竖屏界面801补全为长宽比近似1:1的界面。同理,如图9所示,可以通过在位于初始位置的横屏界面901的一侧拼接补全界面902,以使横屏界面901补全为长宽比近似1:1的界面。
其中,以电子设备通过转动的方式以从竖屏状态切换至横屏状态为例,竖屏界面的补全界面的拼接位置可以是在竖屏界面的第一方向上的一侧,该第一方向可以与电子设备的转动方向相反。例如,电子设备由竖屏状态切换至横屏状态时转动方向为向左转动,则第一方向为竖屏界面的右侧方向。同理,横屏界面的补全界面的拼接位置可以是在竖屏界面的第二方向上的一侧,该第二方向可以与电子设备的转动方向相反。例如,电子设备由竖屏状态切换至横屏状态时转动方向为向左转动,则第二方向为横屏界面的右侧方向。
需要说明的是,在竖屏界面以及横屏界面被补全之后,受限于电子设备的屏幕显示区域大小和比例,如图8所示,初始位置下的竖屏界面801所拼接的补全界面802不可见,而如图9所示,初始位置下的横屏界面901及其拼接的补全界面902部分可见。
在一些实施例中,上述补全界面可以根据电子设备的***主题色进行设置。示例地,图10示出了一种界面动效的显示方法的实现框架示意图。参照图10所示,在电子设备显示竖屏界面的旋转淡出之前,可以对竖屏界面通过拼接补全界面的形式进行补全,然后再显示补全后的竖屏界面的旋转淡出,其中旋转中心为竖屏界面中显示内容的中心,淡出为竖屏界面的透明度由100%减小至0%。同理,在电子设备显示横屏界面的旋转淡入之前,可以对横屏界面通过拼接补全界面的形式进行补全,然后再显示补全后的横屏界面的旋转淡入,其中旋转中心为横屏界面中显示内容的中心,淡入为横屏界面的透明度由0%增加至100%。其中,电子设备的***可以具有深色模式和浅色模式两种***模式,电子设备可以根据深色模式或浅色模式相对应的主题颜色,显示颜色为对应主题颜色的补全界面。例如,深色模式对应的主题颜色为黑色,浅色模式对应的主题颜色为白色,则电子设备检测到其当前所处的***模式为浅色模式时,可以显示颜色为白色的补全界面或者电子设备检测到其当前所处的***模式为深色模式时,可以显示颜色为黑色的补全界面。
在另一些实施例中,上述补全界面还可以根据其对应被补全的竖屏界面或横屏界面的颜色进行设置。示例地,电子设备可以根据竖屏界面对应的图层颜色,显示相应颜色的补全界面,使该补全界面与竖屏界面之间具有更小的色彩对比度,以减小该补全界面与竖屏界面间的视觉差异。同理,电子设备可以根据横屏界面对应的图层颜色,显示相应颜色的补全界面,使该补全界面与横屏界面之间具有更小的色彩对比度,以减小该补全界面与横屏界面间的视觉差异。从而能够提高补全后的竖屏界面和补全后的横屏界面的视觉统一性,增强用户体验。
例如,对于补全竖屏界面的补全界面,电子设备可以获取竖屏界面的图层的背景主色(如灰色等),显示颜色为该背景主色的补全界面(如显示颜色为灰色的补全界面)。对于补全横屏界面的补全界面,电子设备可以获取横屏界面的图层的背景主色(如蓝色等),显示颜色为该背景主色的补全界面(如显示颜色为蓝色的补全界面)。其中,若竖屏界面和/或横屏界面的图层为彩色,背景主色较难识别,则电子设备可以以彩色作为补全界面的颜色进行显示,即显示颜色为彩色的补全界面。
又例如,对于补全竖屏界面的补全界面,电子设备可以获取竖屏界面的图层的边缘颜色(如白色等),显示颜色为该边缘颜色的补全界面(如显示颜色为白色的补全界面)。对于补全横屏界面的补全界面,电子设备可以获取横屏界面的图层的边缘颜色(如黑色等),显示颜色为该边缘颜色的补全界面(如显示颜色为黑色的补全界面)。
在另一些实施例中,电子设备还可以根据预先配置的颜色显示补全界面。例如,电子设备的第一应用中可以预先配置有其竖屏界面的补全界面的颜色,以及横屏界面的补全界面的颜色,电子设备根据颜色配置显示相应颜色的补全界面。
在另一些实施例中,上述补全界面还可以根据横屏界面进行其他设置。如,横屏界面的补全界面中还可以包括横屏界面中的一个或多个元素。其中,上述元素可以是展示类元素(图片、视频、文本、图标、banner)、操控类元素(按钮、进度滑块、工具栏)等。示例地,电子设备可以将横屏界面内的控件、图形等元素进行复制并呈现在补全界面内,以对横屏界面进行补全。例如,如图11所示,横屏界面1101中包括设置选项1102(如设置选项1、设置选项2……设置选项5)、控件1103,以及文本线1104。电子设备将横屏界面1101中的文本线1104以及控件1103进行复制以呈现在补全界面1105内。或者,电子设备可以直接将横屏界面本身进行复制,以作为横屏界面的补全界面进行设置。如此,随着横屏界面的旋转淡入,由于补全界面具有横屏界面的部分内容,所以补全界面逐渐旋出以及横屏界面逐渐旋入之间具有更好的连续性以及延续感,提高用户体验。
可选地,如图12所示,在旋转过程中,该补全界面1201还可以逐渐压缩,如,补全界面1201以其与横屏界面1202相拼接的一边为基准进行压缩,随着横屏界面1202以及补全界面1201的旋转,补全界面1201的底边(补全界面1201的底边是指横屏界面1202正常视角下所对应的补全界面的底部,如图12中所示的B边)朝向横屏界面1202逐渐靠近。并且,如图12所示的补全后的横屏界面(即包含横屏界面1202和补全界面1201的界面),其A边和B边可以分别与竖屏界面1203的两短边对齐,而C边与竖屏界面1203的一侧长边对齐。此时,竖屏界面1203的底边(竖屏界面1203的底边是指竖屏界面1203正常视角下位于底部的一边)可以设置为始终与横屏界面1202的补全窗体1201的底边(如图12中所示的B边)对齐显示(例如,沿横屏界面1202的补全窗体的底边对竖屏界面1203进行裁切等)。如此设置,能够增强横屏界面的旋转淡入动效中,横屏界面内容的延续感。
示例地,以竖屏界面在初始位置时的尺寸为2340×1080,横屏界面在初始位置时的尺寸为1080×2340,横屏界面的补全界面在初始位置时的尺寸为1260×2340为例(其中,竖屏界面、横屏界面以及补全界面的尺寸均始终以宽×高的形式表示)。当电子设备由竖屏状态变更为横屏状态时(例如电子设备以其屏幕所在平面为基准面转动90度时),当前电子设备显示的横屏界面位于初始位置,电子设备显示横屏界面旋转淡入的动效具体可以为,该横屏界面及其补全界面从初始位置开始旋转(或者说补全后的横屏界面从初始位置开始旋转),此时横屏界面的尺寸为初始位置时的1080×2340。当横屏界面以与电子设备的转动方向相反的方向旋转90度并停止旋转之后,横屏界面的尺寸为2340×1080,此时该横屏界面的补全界面的尺寸由初始位置的1260×2340逐渐转变为2340×0并停止旋转,即该补全窗体跟随横屏界面旋转90度,并且底部朝向横屏界面逐渐压缩。同理,电子设备显示竖屏界面旋转淡出的动效具体可以为,竖屏界面从初始位置开始旋转,此时竖屏界面的尺寸为初始位置时的2340×1080。当竖屏界面以与电子设备的转动方向相反的方向旋转90度并停止旋转之后,竖屏界面的尺寸变为1080×1080,即竖屏界面旋转90度时,底部随上述补全窗体的压缩被裁切。
在现有的横竖屏界面转换中,由于仅通过对应用的同一界面(例如竖屏界面)进行旋转、压缩或拉伸,以实现应用的界面对电子设备的竖屏状态和横屏状态进行适配。所以,应用的界面在转换之后,其布局并不能很好的与电子设备的屏幕相适配,可能会出现布局混乱的问题。
因此,在本申请实施例中,继续以电子设备显示的第一应用的第一应用界面由竖屏界面切换至横屏界面为例,电子设备还可以对横屏界面的布局进行动态调整(或者说调整横屏界面中各元素的布局)。从而使应用转换后的横屏界面能够与屏幕更加适配,布局更加适合在横屏状态下浏览和操作。
需要说明的是,对横屏界面的动态布局可以是在横屏界面旋转淡入的过程中进行,也可以是在横屏界面旋转淡入完成后进行的,此处不做限制。
在本申请实施例中,可以对第一应用中的横屏界面内的各元素进行配置,以对各元素的主次进行定义(或者说对各元素的主次关系进行预定),即定义出哪些元素为主元素,哪些元素为次元素。从而便于后续对横屏界面进行动态布局时按照定义的主元素和次元素对界面内各元素进行布局。
在一些实施例中,可以按照界面内各元素间的逻辑层次关系,对元素的主次进行定义,并通过配置相关联的标识(identity,ID)以对关联的主元素和次元素进行绑定。例如,在横屏界面中具有元素一、元素二、元素三……元素六,六个元素。其中,元素一分别和元素三、元素四间具有逻辑关系,元素二分别和元素五、元素六间具有逻辑关系。根据上述各元素间的逻辑关系,可以将元素一定义为主元素1、将元素二定义为主元素2,并且,将与元素一具有逻辑关系的元素三定义为次元素1.1、元素四定义为次元素1.2,将与元素二具有逻辑关系的元素五定义为次元素2.1、元素六定义为次元素2.2。其中,1、2为主元素的ID,1.1、1.2、2.1、2.2为与主元素的ID相绑定的次元素的ID。
在另一些实施例中,还可以按照元素类型对元素的主次进行定义,并通过配置相应的ID以对关联的主元素和次元素进行绑定。例如,将界面内的图片类元素(ImageView)和/或视频类元素(VideoView)定义为主元素(MajorView),将界面内的文字类元素(TextView)定义为次元素(MinorView)。并且,若定义为主元素的某个图片或视频具有对应的文字描述,则可将该文字描述作为该主元素相关联的次元素进行绑定。其中,ID的相关配置可以与上述按照界面内各元素间的逻辑层次关系对元素进行配置时主次元素的ID配置类似,此处不做赘述。
其中,以上所述的主元素可以通过major属性(主属性)进行配置,次元素可以通过minor属性(次属性)进行配置。并且,主元素内还可以再嵌套配置相应的主元素和次元素等,此处不做限制。例如,横屏界面内有元素一、元素二以及元素三,其中,元素一与元素二之间具有层级关系,元素二与元素三之间具有层级关系。可以将元素一定义为主元素1,而将元素二和元素三分别作为元素一内嵌套的主元素和次元素,其中,元素二作为主元素、元素三作为次元素。元素二配置的ID可以与元素一配置的ID相绑定,也可以不绑定。例如,两个ID相绑定,元素二定义为主元素1.1,该ID 1.1与元素一的ID 1相绑定,此时,元素三则可以定义为次元素1.1.1。或者两个ID不绑定,元素二定义为主元素2,此时,元素三则可定义为次元素2.1。
需要说明的是,对横屏界面内各元素配置定义出的各主元素间以及各次元素间若存在优先级设定,则可以通过其配置的ID的大小进行优先级设定。例如,通过ID的数字的升序来定义各主元素间以及各次元素间的优先级。优先级可以随着ID的增大而下降。如主元素1的优先级大于主元素2的优先级;次元素1.1的优先级大于次元素1.2的优先级等。
可选地,在本申请实施例中,还可以不对第一应用中的横屏界面内的各元素进行专门配置来定义元素的主次。电子设备可以对横屏界面内的各元素的主次,根据默认规则进行智能识别,即通过识别获取横屏界面内各元素的类型,根据各元素类型间预定的主次关系调整横屏界面内各元素的布局。例如,横屏界面内包含图片类元素一,视频类元素一以及文字类元素一和文字类元素二等,并且文字类元素一为对图片类元素一进行的描述,文字类元素二为对视频类元素一进行的描述。此时,电子设备通过智能识别,可以将在横屏界面内识别出的图片类元素一和视频类元素二作为主元素,而将识别出的文字类元素一作为次元素并与图片类元素一绑定,将识别出的文字类元素二作为次元素并与视频类元素一绑定。
其中,若横屏界面仅包含文字类元素,则电子设备可以通过智能识别,识别出标题以及标题下的具体文字内容等。从而将识别出的标题定义为主元素,而将识别出的文字内容定义为次元素。并且,可以将某个标题及其相关的文字内容分别定义出的主元素和次元素进行绑定。其中,若识别出的某个标题下的文字内容段落较多,还可以将该文字内容按照段落,或者屏幕显示区域的大小进行拆分,以拆分出与对应标题绑定的多个次元素。
示例地,电子设备显示的第一应用的第一应用界面由竖屏界面转换为横屏界面时,电子设备可以根据对第一应用内各元素定义出的主元素和次元素对横屏界面进行动态布局。示例地,可以将横屏界面内定义的主元素布局在横屏界面的一侧,而将次元素布局在横屏界面的另一侧,以分开显示主元素和次元素。例如,如图13所示,电子设备对横屏界面动态布局后,将定义的主元素1301(如,图13中的主元素1,主元素2,主元素3)布局在横屏界面1300的左侧,将定义的次元素1302(如,图13中的次元素1,次元素2,次元素3)布局在横屏界面1300的右侧。
其中,若某个主元素下还嵌套配置有主元素和次元素,则示例地,在该主元素的位置还可以嵌套显示相应的主元素和次元素。或者,还可以是当用户对该主元素进行点击操作时,电子设备对应展开显示该主元素下嵌套配置的主元素和次元素等,对此,在本申请实施例中不做限制。
在一些实施例中,电子设备还可以仅显示某个主元素以及与该主元素绑定的次元素。不同的主元素可以通过滑动屏幕的方式进行切换,并且当主元素切换时对应绑定的次元素可以同步切换。其中,当某个主元素绑定的次元素较多,无法全部显示时,各次元素还可以按照列表排列,通过滑动屏幕的方式切换列表中其他未显示的次元素。
例如,如图14所示,电子设备的横屏界面1400中,左侧显示定义为主元素的元素一1401,右侧显示与该主元素相绑定的次元素,如,元素二1402和元素三1403等,并且可以通过滑动屏幕的方式切换显示下一页的主元素,如元素四1404。
其中,电子设备还可以根据用户的选择操作(如点击操作等),对主元素和次元素进行全屏显示。例如,电子设备显示主元素和次元素,当用户通过点击屏幕的方式对某个主元素或次元素进行选择后,电子设备可以全屏显示该主元素或次元素所对应的内容。从而便于用户在横屏状态下对相应的元素进行全屏操作。
需要说明的是,应当理解,电子设备显示的应用界面由竖屏界面转换为横屏界面时对横屏界面进行动态布局的过程,和由横屏界面转换为竖屏界面时对竖屏界面进行动态布局的过程是互为逆序的,两者具有相似的转换和调整过程,可相互参考,此处不再赘述。并且,由于横屏界面的动态布局和竖屏界面的动态布局在动效中可具有可逆性,因此对于竖屏界面内各元素的主次定义以及对横屏界面中的主次定义可以保持一致,避免横竖屏界面相互切换时布局各元素的主次逻辑不一致。
在本申请实施例中,上述的界面动效的显示方法还可以应用于图3所示出的场景中。即某个应用的界面,例如第一应用的界面,在常规显示为竖屏界面的第一电子设备和常规显示为横屏界面的第二电子设备间进行横屏界面和竖屏界面的切换。通过该方法能够使第一电子设备和第二电子设备间投屏时的屏幕切换具有更好的连续性,提高设备投屏时的用户体验。
以第一电子设备将其显示的第一应用的界面向第二电子设备投屏时,第一应用的界面由竖屏界面向横屏界面转换为例。其中,以上第二电子设备可以是一个或多个,即第一电子设备可以向一个电子设备进行投屏,也可以同时向多个电子设备投屏。
该场景下竖屏界面的离场动效(例如旋转淡出动效)和横屏界面的入场动效(例如旋转淡入动效)的具体实现,与上述第一应用的第一应用界面在一个电子设备内由竖屏界面向横屏界面转换时相同,其区别在于,竖屏界面的旋转淡出动效和横屏界面的旋转淡入动效可以分别在第一电子设备和第二电子设备中进行显示。
例如,如图15所示,当第一电子设备1501向第二电子设备1502投屏时,第一电子设备1501显示竖屏界面1503的旋转淡出动效,而第二电子设备1502显示横屏界面1504的旋转淡入动效。其中,第一电子设备显示竖屏界面的旋转淡出的时机,与第二电子设备显示横屏界面的旋转淡入的时机可以根据实际需求进行设置,此处不做限制。如,可以是第一电子设备显示完竖屏界面的旋转淡出之后,第二电子设备再显示横屏界面的旋转淡入。或者,当第一电子设备显示竖屏界面的旋转淡出的过程中竖屏界面的透明度减小至原透明度的一半时,第二电子设备开始显示横屏界面的旋转淡入等。
可选地,在该场景下,第一应用的第一应用界面由竖屏界面向横屏界面转换的过程,还可以是第一电子设备和第二电子设备显示相同的动效。即将前述在一个电子设备内进行横竖屏界面转换的转屏动效分别在第一电子设备和第二电子设备内显示。
例如,如图16所示,当第一电子设备1601向第二电子设备1602投屏时,第一电子设备1601显示第一应用的竖屏界面1603的旋转淡出动效,以及横屏界面1604的旋转淡入动效。第二电子设备1602同样显示第一应用的竖屏界面1603的旋转淡出动效,以及横屏界面1604的旋转淡入动效。
其中,各电子设备显示的第一应用的竖屏界面的旋转淡出动效以及横屏界面的旋转淡入动效,可参考前述在一个电子设备内进行横竖屏界面转换的转屏动效,此处不做赘述。在本申请实施例中,第一电子设备显示转屏动效的时机,以及第二电子设备显示转屏动效的时机,可以根据具体需要进行设置。
例如,第一电子设备显示完转屏动效之后,第二电子设备再显示同样的转屏动效,或者第一电子设备和第二电子设备同时显示转屏动效等。
在上述场景中,第二电子设备显示的动效可以是第一电子设备向其发送的,第二电子设备可以在接收到相应的动效后进行显示。
需要说明的是,应当理解,在图3所示的场景下,本申请实施例提供的一种界面动效的显示方法的具体实施例,除上述描述外,其余均与前述在一个电子设备中实施的方式相似或相同,因此不再赘述。
采用以上实施例中的方法,在电子设备的屏幕状态发生变更时,例如由竖屏状态变成横屏状态或由横屏状态变更为竖屏状态时,电子设备可以通过显示相应应用预先配置好的横屏界面和竖屏界面之间的转场切换,来实现横屏界面和竖屏界面之间的切换。该过程中,横屏界面和竖屏界面只需进行切入和切出,不需要进行压缩或拉伸,从而避免电子设备在显示动效时,动效所呈现的界面存在拉伸或压缩等变形的问题,以免给用户造成花屏、截屏等错觉,使得横屏界面和竖屏界面之间的转换能够更加流畅、连续以及协调,提升用户体验。另外,处于竖屏状态的第一电子设备向处于横屏状态的第二电子设备投屏时,也可以采用以上实施例的方法,能够利用竖屏界面和横屏界面分别在以上两个电子设备中转场切换,使第一电子设备和第二电子设备间投屏时的屏幕切换具有更好的连续性,提高设备投屏时的用户体验。并且,采用以上实施例中的方法,还可以对横竖屏界面切换后的界面(例如竖屏界面切换后的横屏界面,或横屏界面切换后的竖屏界面)进行动态布局,从而使切换后的界面能够更好的与屏幕相适配,使其布局更加便于操作和浏览。
对应于前述实施例中的方法,本申请实施例还提供一种界面动效的显示装置。该装置可以应用于图2所示场景中的电子设备,用于实现前述实施例中的方法。该装置的功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块。例如,图17示出了一种界面动效的显示装置的结构示意图,如图17所示,该装置包括:显示模块1701和处理模块1702等。
其中,显示模块1701,可以用于在处于第一状态的情况下显示第一界面,第一界面的布局信息与第一状态的屏幕属性对应;处理模块1702,可以用于接收到用户的状态切换操作,由第一状态切换至第二状态;显示模块1701,还可以用于显示由第一界面切换至所述第二界面的动效;第二界面的布局信息与第二状态的屏幕属性对应;其中,第一状态为横屏状态,第二状态为竖屏状态;或第一状态为竖屏状态,第二状态为横屏状态。
在一种可能的实现方式中,处理模块1702,还用于获取第二界面中各元素的类型;根据第二界面中各元素的类型以及预定的不同类型的主次关系,调整第二界面中各元素的布局。
在另一种可能的实现方式中,处理模块1702,还用于根据第二界面中各元素预定的主次关系,调整第二界面中各元素的布局。
在另一种可能的实现方式中,显示模块1701,具体用于显示第一界面的离场动效,显示第二界面的入场动效。
在另一种可能的实现方式中,处理模块1702,还用于将第一界面和第三界面进行拼接,获得第四界面;显示模块1701,具体用于显示第四界面的离场动效。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第三界面拼接在第一界面的第一方向上,第一方向与由第一状态切换到第二状态电子设备的转动方向相反。
在另一种可能的实现方式中,处理模块1702,具体用于将第二界面和第五界面进行拼接,获得第六界面;显示模块1701,具体用于显示第六界面的离场动效。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第五界面拼接在第二界面的第二方向上,第二方向与由第一状态切换到第二状态电子设备的转动方向相反。
在另一种可能的实现方式中,第五界面包括第二界面的一个或多个元素。
对应于前述实施例中的方法,本申请实施例还提供一种界面动效的显示装置。该装置可以应用于图3所示场景中的第一电子设备301,用于实现前述实施例中的方法。该装置的功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块。
例如,图18示出了一种界面动效的显示装置的结构示意图,如图18所示,该装置包括:显示模块1801、发送模块1802和处理模块1803等。
其中,显示模块1801,可以用于显示第一界面,第一界面的布局信息与第一状态的屏幕属性对应;显示模块1801,还可以用于接收到用户的投屏操作,显示第一界面的离场动效;发送模块1802,可以用于向第二电子设备发送第二界面的入场动效数据,以使第二电子设备显示第二界面的入场动效,第二界面的布局信息与第二状态的屏幕属性对应。
在一种可能的实现方式中,处理模块1803,可以用于获取第二界面中各元素的类型;发送模块1802,还可以用于根据第二界面中各元素的类型以及预定的不同类型的主次关系,向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。
在另一种可能的实现方式中,发送模块1802,还可以用于根据第二界面中各元素预定的主次关系,向第二电子设备发送第二界面中各元素的布局调整数据,以使第二电子设备显示第二界面调整后的布局。
在另一种可能的实现方式中,处理模块1803,还可以用于将第一界面和第三界面进行拼接,获得第四界面;显示模块1801,具体用于显示第四界面的离场动效。
在另一种可能的实现方式中,第三界面的背景颜色,与第一界面的背景颜色、第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,处理模块1803,还可以用于将第二界面和第五界面进行拼接,获得第六界面;发送模块1802,具体用于向所述第二电子设备发送所述第六界面的入场动效数据。
在另一种可能的实现方式中,第五界面的背景颜色,与第二界面的背景颜色、第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
在另一种可能的实现方式中,第五界面包括第二界面的一个或多个元素。
应理解以上装置中单元或模块(以下均称为单元)的划分仅仅是一种逻辑功能的划分,实际实现时可以全部或部分集成到一个物理实体上,也可以物理上分开。且装置中的单元可以全部以软件通过处理元件调用的形式实现;也可以全部以硬件的形式实现;还可以部分单元以软件通过处理元件调用的形式实现,部分单元以硬件的形式实现。
例如,各个单元可以为单独设立的处理元件,也可以集成在装置的某一个芯片中实现,此外,也可以以程序的形式存储于存储器中,由装置的某一个处理元件调用并执行该单元的功能。此外这些单元全部或部分可以集成在一起,也可以独立实现。这里所述的处理元件又可以称为处理器,可以是一种具有信号的处理能力的集成电路。在实现过程中,上述方法的各步骤或以上各个单元可以通过处理器元件中的硬件的集成逻辑电路实现或者以软件通过处理元件调用的形式实现。
在一个例子中,以上装置中的单元可以是被配置成实施以上方法的一个或多个集成电路,例如:一个或多个ASIC,或,一个或多个DSP,或,一个或者多个FPGA,或这些集成电路形式中至少两种的组合。
再如,当装置中的单元可以通过处理元件调度程序的形式实现时,该处理元件可以是通用处理器,例如CPU或其它可以调用程序的处理器。再如,这些单元可以集成在一起,以片上***(system-on-a-chip,SOC)的形式实现。
在一种实现中,以上装置实现以上方法中各个对应步骤的单元可以通过处理元件调度程序的形式实现。例如,该装置可以包括处理元件和存储元件,处理元件调用存储元件存储的程序,以执行以上方法实施例所述的方法。存储元件可以为与处理元件处于同一芯片上的存储元件,即片内存储元件。
在另一种实现中,用于执行以上方法的程序可以在与处理元件处于不同芯片上的存储元件,即片外存储元件。此时,处理元件从片外存储元件调用或加载程序于片内存储元件上,以调用并执行以上方法实施例所述的方法。
例如,本申请实施例还可以提供一种装置,如:电子设备(图2所示场景中的电子设备、图3所示场景中的第一电子设备301等),可以包括:处理器,用于存储该处理器可执行指令的存储器。该处理器被配置为执行上述指令时,使得该电子设备实现如前述实施例所述的界面动效的显示方法。该存储器可以位于该电子设备之内,也可以位于该电子设备之外。且该处理器包括一个或多个。
在又一种实现中,该装置实现以上方法中各个步骤的单元可以是被配置成一个或多个处理元件,这些处理元件可以设置于对应上述的电子设备上,这里的处理元件可以为集成电路,例如:一个或多个ASIC,或,一个或多个DSP,或,一个或者多个FPGA,或者这些类集成电路的组合。这些集成电路可以集成在一起,构成芯片。
例如,本申请实施例还提供一种芯片,该芯片可以应用于上述电子设备。芯片包括一个或多个接口电路和一个或多个处理器;接口电路和处理器通过线路互联;处理器通过接口电路从电子设备的存储器接收并执行计算机指令,以实现以上方法实施例中所述的方法。
本申请实施例还提供一种计算机程序产品,包括电子设备,如上述电子设备,运行的计算机指令。
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个装置,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是一个物理单元或多个物理单元,即可以位于一个地方,或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,如:程序。该软件产品存储在一个程序产品,如计算机可读存储介质中,包括若干指令用以使得一个设备(可以是单片机,芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
例如,本申请实施例还可以提供一种计算机可读存储介质,其上存储有计算机程序指令。当计算机程序指令被电子设备执行时,使得电子设备实现如前述方法实施例中所述的界面动效的显示方法。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。

Claims (23)

1.一种界面动效的显示方法,其特征在于,应用于电子设备,所述电子设备包括第一状态和第二状态,所述方法包括:
所述电子设备在处于所述第一状态的情况下显示第一界面,所述第一界面的布局信息与所述第一状态的屏幕属性对应;
接收到用户的状态切换操作,所述电子设备由第一状态切换至第二状态;
所述电子设备显示由所述第一界面切换至所述第二界面的动效;所述第二界面的布局信息与所述第二状态的屏幕属性对应;
其中,所述第一状态为横屏状态,所述第二状态为竖屏状态;或所述第一状态为竖屏状态,所述第二状态为横屏状态。
2.如权利要求1所述的方法,其特征在于,所述方法还包括:
所述电子设备获取所述第二界面中各元素的类型;
所述电子设备根据所述第二界面中各元素的类型以及预定的不同类型的主次关系,调整所述第二界面中各元素的布局。
3.如权利要求1所述的方法,其特征在于,所述方法还包括:
所述电子设备根据所述第二界面中各元素预定的主次关系,调整所述第二界面中各元素的布局。
4.如权利要求1至3任一项所述的方法,其特征在于,所述电子设备显示由所述第一界面切换至所述第二界面的动效,包括:
所述电子设备显示所述第一界面的离场动效,显示所述第二界面的入场动效。
5.如权利要求4所述的方法,其特征在于,所述电子设备显示所述第一界面的离场动效,包括:
所述电子设备将所述第一界面和第三界面进行拼接,获得第四界面;
所述电子设备显示所述第四界面的离场动效。
6.如权利要求5所述的方法,其特征在于,所述第三界面的背景颜色,与所述第一界面的背景颜色、所述第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
7.如权利要求5或6所述的方法,其特征在于,所述第三界面拼接在所述第一界面的第一方向上,所述第一方向与由所述第一状态切换到所述第二状态所述电子设备的转动方向相反。
8.如权利要求4至7任一项所述的方法,其特征在于,所述显示所述第二界面的入场动效,包括:
所述电子设备将所述第二界面和第五界面进行拼接,获得第六界面;
所述电子设备显示所述第六界面的离场动效。
9.如权利要求8所述的方法,其特征在于,所述第五界面的背景颜色,与所述第二界面的背景颜色、所述第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
10.如权利要求8或9所述的方法,其特征在于,所述第五界面拼接在所述第二界面的第二方向上,所述第二方向与由所述第一状态切换到所述第二状态所述电子设备的转动方向相反。
11.如权利要求8至10任一项所述的方法,其特征在于,所述第五界面包括所述第二界面的一个或多个元素。
12.一种界面动效的显示方法,其特征在于,应用于投屏***的第一电子设备,所述投屏***还包括第二电子设备,所述第一电子设备处于第一状态,所述第二电子设备处于第二状态,所述第一状态为横屏状态,所述第二状态为竖屏状态;或所述第一状态为竖屏状态,所述第二状态为横屏状态,所述方法包括:
所述第一电子设备显示第一界面,所述第一界面的布局信息与所述第一状态的屏幕属性对应;
接收到用户的投屏操作,所述第一电子设备显示所述第一界面的离场动效;
所述第一电子设备向所述第二电子设备发送第二界面的入场动效数据,以使所述第二电子设备显示所述第二界面的入场动效,所述第二界面的布局信息与所述第二状态的屏幕属性对应。
13.如权利要求12所述的方法,其特征在于,所述方法还包括:
所述第一电子设备获取所述第二界面中各元素的类型;
所述第一电子设备根据所述第二界面中各元素的类型以及预定的不同类型的主次关系,向所述第二电子设备发送所述第二界面中各元素的布局调整数据,以使所述第二电子设备显示所述第二界面调整后的布局。
14.如权利要求12所述的方法,其特征在于,所述方法还包括:
所述第一电子设备根据所述第二界面中各元素预定的主次关系,向所述第二电子设备发送所述第二界面中各元素的布局调整数据,以使所述第二电子设备显示所述第二界面调整后的布局。
15.如权利要求12至14任一项所述的方法,其特征在于,所述第一电子设备显示所述第一界面的离场动效,包括:
所述第一电子设备将所述第一界面和第三界面进行拼接,获得第四界面;
所述第一电子设备显示所述第四界面的离场动效。
16.如权利要求15所述的方法,其特征在于,所述第三界面的背景颜色,与所述第一界面的背景颜色、所述第一界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
17.如权利要求12至16任一项所述的方法,其特征在于,所述第一电子设备向所述第二电子设备发送第二界面的入场动效数据,包括:
所述第一电子设备将所述第二界面和第五界面进行拼接,获得第六界面;
所述第一电子设备向所述第二电子设备发送所述第六界面的入场动效数据。
18.如权利要求17所述的方法,其特征在于,所述第五界面的背景颜色,与所述第二界面的背景颜色、所述第二界面的边缘颜色、预设颜色、***主题颜色中的任一种相同。
19.如权利要求17或18所述的方法,其特征在于,所述第五界面包括所述第二界面的一个或多个元素。
20.一种电子设备,其特征在于,包括:处理器,用于存储所述处理器可执行指令的存储器;
所述处理器被配置为执行所述指令时,使得所述电子设备实现如权利要求1至11任一项所述的方法。
21.一种计算机可读存储介质,其上存储有计算机程序指令;其特征在于,当所述计算机程序指令被电子设备执行时,使得电子设备实现如权利要求1至11任一项所述的方法。
22.一种电子设备,其特征在于,包括:处理器,用于存储所述处理器可执行指令的存储器;
所述处理器被配置为执行所述指令时,使得所述电子设备实现如权利要求12至19任一项所述的方法。
23.一种计算机可读存储介质,其上存储有计算机程序指令;其特征在于,当所述计算机程序指令被电子设备执行时,使得电子设备实现如权利要求12至19任一项所述的方法。
CN202011483290.1A 2020-12-15 2020-12-15 一种界面动效的显示方法、电子设备及存储介质 Active CN114640743B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011483290.1A CN114640743B (zh) 2020-12-15 2020-12-15 一种界面动效的显示方法、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011483290.1A CN114640743B (zh) 2020-12-15 2020-12-15 一种界面动效的显示方法、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN114640743A true CN114640743A (zh) 2022-06-17
CN114640743B CN114640743B (zh) 2023-10-13

Family

ID=81945067

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011483290.1A Active CN114640743B (zh) 2020-12-15 2020-12-15 一种界面动效的显示方法、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN114640743B (zh)

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102520842A (zh) * 2011-11-18 2012-06-27 广东欧珀移动通信有限公司 一种手持设备的横竖屏切换旋转控制方法
CN102541441A (zh) * 2011-11-18 2012-07-04 广东欧珀移动通信有限公司 一种手持设备的横竖屏切换渐变控制方法
US20130093764A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of animating a rearrangement of ui elements on a display screen of an electronic device
CN106201385A (zh) * 2015-05-04 2016-12-07 联想(北京)有限公司 控制方法、装置及电子设备
CN107423010A (zh) * 2017-03-23 2017-12-01 联想(北京)有限公司 一种信息处理方法及电子设备
CN108491124A (zh) * 2018-03-08 2018-09-04 腾讯科技(深圳)有限公司 一种界面处理方法及其设备、存储介质、终端
CN109426532A (zh) * 2017-08-22 2019-03-05 腾讯科技(深圳)有限公司 安卓***中衔接页面的方法、装置及电子设备
CN110399064A (zh) * 2019-07-22 2019-11-01 腾讯科技(深圳)有限公司 显示界面的切换方法和装置、存储介质及电子装置
US20200175945A1 (en) * 2017-04-20 2020-06-04 Huawei Technologies Co., Ltd. Display control method and apparatus

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130093764A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of animating a rearrangement of ui elements on a display screen of an electronic device
CN102520842A (zh) * 2011-11-18 2012-06-27 广东欧珀移动通信有限公司 一种手持设备的横竖屏切换旋转控制方法
CN102541441A (zh) * 2011-11-18 2012-07-04 广东欧珀移动通信有限公司 一种手持设备的横竖屏切换渐变控制方法
CN106201385A (zh) * 2015-05-04 2016-12-07 联想(北京)有限公司 控制方法、装置及电子设备
CN107423010A (zh) * 2017-03-23 2017-12-01 联想(北京)有限公司 一种信息处理方法及电子设备
US20200175945A1 (en) * 2017-04-20 2020-06-04 Huawei Technologies Co., Ltd. Display control method and apparatus
CN109426532A (zh) * 2017-08-22 2019-03-05 腾讯科技(深圳)有限公司 安卓***中衔接页面的方法、装置及电子设备
CN108491124A (zh) * 2018-03-08 2018-09-04 腾讯科技(深圳)有限公司 一种界面处理方法及其设备、存储介质、终端
CN110399064A (zh) * 2019-07-22 2019-11-01 腾讯科技(深圳)有限公司 显示界面的切换方法和装置、存储介质及电子装置

Also Published As

Publication number Publication date
CN114640743B (zh) 2023-10-13

Similar Documents

Publication Publication Date Title
CN109191549B (zh) 显示动画的方法及装置
CN110706310B (zh) 一种图文融合方法、装置及电子设备
WO2022262313A1 (zh) 基于画中画的图像处理方法、设备、存储介质和程序产品
CN112506386A (zh) 一种折叠屏显示方法及电子设备
WO2021208723A1 (zh) 全屏显示方法、装置和电子设备
CN111385514B (zh) 人像处理方法和装置以及终端
CN114115769A (zh) 一种显示方法及电子设备
CN112558898A (zh) 显示方法及电子设备
WO2022028241A1 (zh) 预览封面生成方法及电子设备
EP4325877A1 (en) Photographing method and related device
WO2023142915A1 (zh) 图像处理方法、装置、设备及存储介质
EP3979620A1 (en) Photographing method and terminal
WO2022252649A1 (zh) 一种视频的处理方法及电子设备
WO2022252563A1 (zh) 信息显示方法及电子设备
CN109636715B (zh) 图像数据的传输方法、装置及存储介质
CN112866557A (zh) 构图推荐方法和电子设备
WO2021121036A1 (zh) 一种折叠设备的自定义按键方法、设备及存储介质
CN112269554B (zh) 显示***及显示方法
CN113850709A (zh) 图像变换方法和装置
CN110992268A (zh) 背景设置方法、装置、终端及存储介质
WO2023010912A9 (zh) 一种图像处理方法及电子设备
CN114915722B (zh) 处理视频的方法和装置
CN114640743B (zh) 一种界面动效的显示方法、电子设备及存储介质
CN113407141A (zh) 界面更新方法、装置、终端和存储介质
WO2021093847A1 (zh) 一种具有柔性屏幕的电子设备的显示方法及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant