CN105975181A - 侧滑界面的显示控制方法和装置 - Google Patents

侧滑界面的显示控制方法和装置 Download PDF

Info

Publication number
CN105975181A
CN105975181A CN201610297106.1A CN201610297106A CN105975181A CN 105975181 A CN105975181 A CN 105975181A CN 201610297106 A CN201610297106 A CN 201610297106A CN 105975181 A CN105975181 A CN 105975181A
Authority
CN
China
Prior art keywords
button
homepage
sliding
animation
sideslip
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
CN201610297106.1A
Other languages
English (en)
Other versions
CN105975181B (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.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen 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 Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Priority to CN201610297106.1A priority Critical patent/CN105975181B/zh
Publication of CN105975181A publication Critical patent/CN105975181A/zh
Priority to AU2017259235A priority patent/AU2017259235B2/en
Priority to US16/075,314 priority patent/US20190073104A1/en
Priority to EP17792387.7A priority patent/EP3454195A4/en
Priority to PCT/CN2017/077547 priority patent/WO2017190560A1/zh
Priority to KR1020187018398A priority patent/KR102215712B1/ko
Priority to JP2018519722A priority patent/JP6549796B2/ja
Priority to SG11201805502WA priority patent/SG11201805502WA/en
Application granted granted Critical
Publication of CN105975181B publication Critical patent/CN105975181B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483Interaction with page-structured environments, e.g. book metaphor
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485Scrolling or panning
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00Animation
    • G06T13/802D [Two Dimensional] animation, e.g. using sprites

Landscapes

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

Abstract

本发明涉及一种侧滑界面的显示控制方法和装置,该方法包括以下步骤:实时获取滑动触控点的第一滑动速度,滑动触控点作用于侧滑界面上的任意位置,第一滑动速度包含第一滑动速率和第一滑动方向;根据第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向;控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。提高了侧滑界面的可控性。

Description

侧滑界面的显示控制方法和装置
技术领域
本发明涉及计算机技术领域,特别是涉及一种侧滑界面的显示控制方法和装置。
背景技术
随着科学技术的发展,移动终端的界面能够展示和处理的内容越来越多,因此对屏幕利用率的要求也越来越高,在这种时代背景下,侧滑菜单应运而生,用户可以将菜单导航(可以理解,菜单导航指包含个人资料、设置等菜单选项的导航)设置于一个菜单页面,通过侧滑主页面或点击头像等方式将该菜单页面隐藏和显现。
传统方法中,用户在进行侧滑操作时,通常是通过控制主页面的移动,来控制主页面的下层菜单页面是否显示,此外,在控制主页面进行滑动时,通常是根据最后的侧滑操作结束位置来确定如何移动主页面。因而传统方法在侧滑时,侧滑界面可控性非常低。
发明内容
基于此,有必要针对上述问题,提供一种能够增强侧滑界面可控性的侧滑界面的显示控制方法和装置。
一种侧滑界面的显示控制方法,所述方法包括以下步骤:
实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;
控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
在其中一个实施例中,所述主页面中包含动画;在所述实时获取滑动触控点的第一滑动速度的步骤之后,还包括:根据所述第一滑动速度计算所述动画的运动参数,根据所述运动参数执行所述动画。
在其中一个实施例中,所述动画包含第一动画和/或第二动画,所述第一动画包含转盘,所述第二动画包含第一按钮;所述根据所述第一滑动速度计算所述动画的运动参数的步骤,包括:
获取第一计算参数,根据所述第一计算参数和所述第一滑动速度计算所述转盘的转动速率及转动方向;和/或
获取第二计算参数,根据所述第二计算参数和所述第一滑动速度计算所述第一按钮的移动速率及对应的移动方向。
在其中一个实施例中,在获取的第一计算参数的步骤之前,还包括:
获取转盘的周长,获取预设的菜单页面的最大宽度值,根据所述转盘的周长和所述菜单页面的最大宽度值的比值计算出第一计算参数。
在其中一个实施例中,在获取的第二计算参数的步骤之前,还包括:
获取至少一个的第一按钮对应的预设移动区间值,根据所述预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据所述移动差值和所述菜单页面的最大宽度值的比值计算出第二计算参数。
在其中一个实施例中,所述转盘中包含第二按钮;所述方法还包括:
实时获取所述第二按钮对应的角度,所述第二按钮对应的角度为以转盘中心点为圆心,以经过所述转盘中心点的水平方向的直线为起始边进行旋转达到所述第二按钮的中心点时所经过的角度;
根据所述第二按钮对应的角度和预设最大伸缩值调整所述第二按钮的大小。
在其中一个实施例中,其特征在于,所述方法还包括:当接收到滑动停止指令时,计算从开始滑动到接收所述滑动停止指令时所述主页面所对应的已滑动距离;当所述已滑动距离大于或等于预设临界距离时,则获取所述主页面完成预设的最大滑动距离所需余下时间;
根据所述第三滑动速率或所述第一预设速率确定所述主页面的第一初始速率,根据所述主页面完成预设的最大滑动距离所需余下时间和所述第一初始速率计算所述主页面对应的第一加速度;
控制所述主页面以所述第一初始速率和所述第一加速度按照所述侧滑方向减速滑动以完成所述预设的最大滑动距离。
在其中一个实施例中,在所述获取所述主页面完成预设的最大滑动距离所需余下时间的步骤之后,还包括:根据所述动画的运动参数中的运动速率或所述第二预设速率确定所述动画的第二初始速率;根据所述主页面完成预设的最大滑动距离所需余下时间和所述第二初始速率计算所述动画的第二加速度,根据第二加速度和所述第二初始速率减速执行一个周期内的剩余动画。
一种侧滑界面的显示控制装置,所述装置包括:
速度监测模块,用于实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
计算模块,用于根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;
滑动控制模块,用于控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
在其中一个实施例中,所述主页面中包含动画;所述计算模块还用于根据所述第一滑动速度计算所述动画的运动参数;
所述装置还包括:
动画执行模块,用于根据所述运动参数执行所述动画。
上述侧滑界面的显示控制方法和装置,实时获取滑动触控点的第一滑动速度,根据第一滑动中的第一滑动速率计算菜单页面的第二滑动速率和主页面的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。即通过滑动触控点的实时滑动速度控制菜单页面和主页面的滑动速率和滑动方向,将滑动触控点的实时滑动与侧滑界面中的菜单页面和主页面的滑动相结合,增强了侧滑界面的可控性。
附图说明
图1为一个实施例中侧滑界面的显示控制方法的流程图;
图2为一个实施例中侧滑界面示意图;
图3为一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图4为另一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图5为又一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图6为一个实施例中第二按钮大小调整方法的流程图;
图7为一个实施例中为描述第二按钮对应的角度的侧滑界面示意图;
图8为一个实施例中最大滑动距离完成方法的流程图;
图9为再一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图10为一个实施例中侧滑界面的显示控制装置的结构示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步的详细说明。应当理解,此处所描述的具体实施例仅用于解释本发明,并不用于限定本发明。
如图1所示,在一个实施例中,提供了一种侧滑界面的显示控制方法,以该方法应用于终端为例进行说明,包括以下步骤:
步骤102,实时获取滑动触控点的第一滑动速度,滑动触控点作用于侧滑界面上的任意位置,第一滑动速度包含第一滑动速率和第一滑动方向。
本实施例中,用户在终端显示的侧滑界面上进行滑动操作,具体地,用户通过触摸终端侧滑界面上的任意位置,以产生滑动触控点来进行滑动操作。其中,侧滑界面用于表示进行侧滑操作时的终端屏幕上所显示的界面,包含正在开始接收侧滑操作但尚未将菜单页面显示出来的主页面,也包含侧滑出菜单页面后,所显示的菜单页面和主页面的整体界面。
进一步,菜单页面指可以通过侧滑操作进行隐藏和显示控制的菜单栏所在页面。主页面,指在用于显示主要业务内容的页面。
进一步对侧滑界面进行解释说明。假设终端屏幕一个顶角为坐标原点(0,0),屏幕上其余任意点坐标为(x,y),这里结合实际情况可以默认x和y的值为正数,屏幕上最大坐标值为(xmax,ymax)。则在进行侧滑操作时,侧滑界面即为由坐标原点(0,0)到坐标(xmax,ymax)这整个屏幕所显示的界面。
如图2所示,图2为侧滑出菜单页面后的侧滑界面图,定点P1(0,0)为坐标原点,顶点P2坐标为(xmax,ymax),则虚线框所示屏幕显示区域即为侧滑界面I,界面中分界线l左边即为菜单页面I1,右边即为主页面I2。滑动触控点可以作用于侧滑界面I上的任意位置。
终端实时获取产生的滑动触控点的第一滑动速度。可以理解,这里的第一滑动速度包含第一滑动速率及对应的第一滑动方向,其中,第一滑动速率指滑动触控点的滑动速率,第一滑动方向指滑动触控点的滑动方向。具体地,终端调用API(Application Programming Interface,应用程序编程接口),通过手势处理器实时获取滑动触控点的第一滑动速率和第一滑动方向。
步骤104,根据第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向。
步骤106,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。
具体地,终端根据第一滑动速率计算菜单页面对应的第二滑动速率以及主页面对应的第三滑动速率。
其中,第二滑动速率、第三滑动速率分别和第一滑动速率之间具有比值关系。具体地,可以根据第一滑动速率与第一预设常数的乘积得到第二滑动速率,根据第一滑动速率与第二预设常数的乘积得到第三滑动速率。需要说明的是,第一预设常数和第二预设常数皆为正数。
其中,第一预设常数可以小于第二预设常数。在一个实施例中,第一预设常数为小于1的正数,第二预设常数为1。通过预设第一预设常数小于第二预设常数,使菜单页面的第二滑动速率小于主页面的第三滑动速率,在侧滑过程中,使主页面和菜单页面之间的显示控制具有渐变性、衔接性,使整个侧滑界面的侧滑显示更加的流畅。
可以理解,第一预设常数也可以等于第二预设常数。
此外,终端还要根据第一滑动方向确定菜单页面和主页面所对应的侧滑方向。可以理解,侧滑方向指当前显示界面所呈现的方向在与用户查看视角一致的情况下,以该用户查看视角为参照,于当前显示界面的水平方向的左右两边进行滑动的方向。
需要说明的是,本发明所有实施例中,所提及水平方向、水平分方向、向左、向右、向上、向下等相关方位描述,都是建立在当前显示界面所呈现的方向与用户查看视角一致,以该用户查看视角为参照的前提下所进行的描述。
具体地,将第一滑动方向对应的水平分方向作为菜单页面和主页面对应的侧滑方向。比如,当第一滑动方向对应的水平分方向为向左时,则确定菜单页面和主页面对应的侧滑方向为水平向左,当第一滑动方向对应的水平分方向为向右时,则确定菜单页面和主页面对应的侧滑方向为水平向右。可以理解,当第一滑动方向不存在水平分方向时,则不产生侧滑方向,主页面和菜单页面则不进行对应的滑动。
进一步,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。即控制菜单页面以第二滑动速率按照对应的侧滑方向进行滑动,控制主页面以第三滑动速率按照对应的侧滑方向进行滑动。
现结合图3进行解释说明,图3为一个实施例中进行侧滑操作的侧滑界面,假如,用户通过滑动触控点P作用于侧滑界面,以第一滑动速率V1向D1方向进行滑动,则确定D1方向的水平分方向为H1,根据V1计算出菜单页面的第二滑动速率V2和主页面的第三滑动速率V3,控制菜单页面以速率V2按照水平分方向H1滑动,控制主页面以速率V3按照水平分方向H1滑动。
本实施例中,滑动触控点可以作用于侧滑界面上的任意位置,扩大了侧滑界面的可控制区域,增强了侧滑界面的可控性。此外,实时获取滑动触控点的第一滑动速度,根据第一滑动中的第一滑动速率计算菜单页面的第二滑动速率和主页面的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。即通过滑动触控点的实时滑动速度控制菜单页面和主页面的滑动速率和滑动方向,将滑动触控点的实时滑动与侧滑界面中的菜单页面和主页面的滑动相结合,进一步增强了侧滑界面的可控性,以及提高了侧滑界面内容显示的流畅性。
在一个实施例中,在步骤104之前,还包括,获取第一滑动方向对应的水平分方向,判断第一滑动方向相较于水平分方向的角度是否在预设范围内,若是,则进入步骤104,若否,则不执行滑动触控点所产生的侧滑操作。通过设置预设范围,能够有效地减少因误判断造成的不需要的侧滑操作,节省处理资源。
在一个实施例中,主页面中包含动画,在实时获取滑动触控点的第一滑动速度的步骤之后,还包括:根据第一滑动速度计算动画的运动参数,根据运动参数执行动画的步骤。
具体地,主页面中包含动画,其中所包含的动画可以为一个或多个。在实时获取滑动触控点的第一滑动速度之后,终端会根据第一滑动速度计算主页面中所包含的动画的运动参数,根据计算出来的运动参数执行该动画以展示动画效果。其中,运动参数包含运动速度。进一步,运动速度包含运动速率及运动方向。
本实施例中,根据滑动触控点的第一滑动速度来计算得到主页面中动画的运动参数,从而实现在侧滑过程中,由滑动触控点的第一滑动速度控制主页面的动画执行与展示,增强了侧滑界面中动画显示的可控性及流畅性。
在一个实施例中,主页面中的动画包含第一动画,第一动画包含转盘,根据第一滑动速度计算动画的运动参数的步骤(简称动画运动参数计算步骤),包括:获取第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率及转动方向。
本实施例中,主页面中的动画包含第一动画,第一动画包含转盘。其中,该转盘可以是3D转盘也可以是2D转盘。
进一步,终端会获取预先设置的第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率和转动方向。即根据第一滑动速度中的第一滑动速率和第一计算参数计算转盘的转动速率,根据第一滑动速度中的第一滑动方向确定转盘的转动方向。
具体地,根据预设的第一滑动方向对应的水平分方向与转盘转动方向之间的对应关系,确定滑动触控点的第一滑动方向所对应的转盘的转动方向。比如,当第一滑动方向的水平分方向向左时,则转盘的转动方向为顺时针,当第一滑动方向的水平分方向向右时,则转盘的转动方向为逆时针。可以理解,这里也可以是第一滑动方向的水平分方向向左时,转盘的转动方向为逆时针。本发明实施例,对第一滑动方向的水平分方向与转盘的转动方向之间的具体何种对应关系不作限定,只要满足第一滑动方向的水平分方向与转盘的转动方向有对应关系即可。
如图4所示,图4为一个实施例中进行侧滑操作时的侧滑界面。用户通过滑动触控点作用于侧滑界面,以第一滑动速率V1向D2方向进行滑动,则确定D2方向的水平分方向为H2,则根据第一滑动方向的水平分方向与转盘T的转动方向之间的对应关系,确定H2对应的转盘T的转动方向为逆时针E2
本实施例中,根据滑动触控点的第一滑动速度和第一计算参数来计算得到第一动画中转盘的转动速率和转动方向,从而实现在侧滑过程中,由滑动触控点的第一滑动速度控制主页面的第一动画中转盘的转动,增强了侧滑界面的第一动画中转盘转动的可控性及流畅性。
在一个实施例中,在获取第一计算参数的步骤之前,还包括第一计算参数计算的步骤,包括:获取转盘的周长,获取预设的菜单页面的最大宽度值,根据转盘的周长和菜单页面的最大宽度值的比值计算出第一计算参数。
具体地,可以是终端直接获取预存储的转盘周长,也可以是终端获取转盘的半径,根据转盘的半径计算出转盘的周长。进一步,终端获取预设的菜单页面的最大宽度值(以下简称最大宽度值),根据转盘的周长和最大宽度值的比值计算出第一计算参数。
其中,预设的菜单页面的最大宽度值指预设的菜单页面可显示的最大宽度。比如,当菜单页面的当前显示的宽度值小于最大宽度值时,则可以进行左滑或右滑的侧滑操作。当菜单页面的当前显示的宽度值等于最大宽度值时,则只能向左进行侧滑操作时,终端才会对应执行该侧滑操作,如果继续向右进行侧滑操作,终端也不进行执行该右滑的滑动操作。
进一步,可以是将转盘的周长与最大宽度值以1比1的比例关系得到第一计算参数,第一计算参数K1=2M_PI*R/W,其中,M_PI为圆周率,R为转盘的半径,W为菜单页面的最大宽度值。本实施例中,使在菜单页面和主页面滑动了一个菜单页面的最大宽度值时,控制转盘正好完成一个周期的旋转。增强了侧滑操作与第一动画的关联性、完整性,更加地增强了侧滑界面的第一动画中转盘转动的可控性及流畅性。
也可以是将转盘的周长与最大宽度值以其它预设的比例关系得到第一计算参数,本发明实施例对此不作限定,只要满足,第一计算参数是根据转盘的周长和预设宽度值的比值计算出的即可。
在一个实施例中,主页面中的动画包含第二动画,第二动画包含第一按钮,根据第一滑动速度计算动画的运动参数的步骤(简称动画运动参数计算步骤),包括:获取第二计算参数,根据第二计算参数和第一滑动速度计算第一按钮的移动速率及对应的移动方向。
本实施例中,主页面中的动画包含第二动画,第二动画包含至少一个的第一按钮。其中,至少一个的第一按钮可以是图标按钮也可以是文字按钮,还可以是图文结合的按钮,可以理解,当第一按钮为多个时,这多个第一按钮的类型可以相同也可以不同,本发明实施例对按钮的具体形式不作限定。进一步,至少一个的第一按钮可以按照预设规则进行排列显示于主页面中。
终端会获取预先设置的第二计算参数,根据第二计算参数和第一滑动速度计算至少一个的第一按钮的移动速率及对应的移动方向。即根据第一滑动速度中的第一滑动速率和第二计算参数计算至少一个的第一按钮的移动速率,根据第一滑动速度中的第一滑动方向确定至少一个的第一按钮的移动方向。
具体地,根据预设的第一滑动方向对应的水平分方向与第一按钮移动方向之间的对应关系,确定滑动触控点的第一滑动方向所对应的第一按钮的移动方向。比如,当第一滑动方向的水平分方向向左时,则第一按钮基于当前显示界面向下移动,当第一滑动方向的水平分方向向右时,则第一按钮基于当前显示界面向上移动。可以理解,这里也可以是第一滑动方向的水平分方向向左时,第一按钮基于当前显示界面向上移动。本发明实施例,对第一滑动方向的水平分方向与第一按钮的移动方向之间的具体何种对应关系不作限定,只要满足第一滑动方向的水平分方向与第一按钮的移动方向有对应关系即可。
如图5所示,图5为一个实施例中进行侧滑操作的侧滑界面。用户通过滑动触控点作用于侧滑界面,以第一滑动速率V1向D2方向进行滑动,则确定D2方向的水平分方向为H2,则根据第一滑动方向的水平分方向与第一按钮方向之间的对应关系,确定H2对应的第一按钮B11、B12和B13的移动方向为向下F2
本实施例中,根据滑动触控点的第一滑动速度和第二计算参数来计算得到第二动画中第一按钮的移动速率和移动方向,从而实现在侧滑过程中,由滑动触控点的第一滑动速度控制主页面的第二动画中第一按钮的移动,增强了侧滑界面的第二动画中第一按钮移动的可控性及流畅性。
在一个实施例中,在获取第二计算参数的步骤之前,还包括第二计算参数计算的步骤,包括:获取至少一个的第一按钮对应的预设移动区间值,根据预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据移动差值和预设的菜单页面的最大宽度值的比值计算出第二计算参数。
本实施例中,终端获取至少一个的第一按钮在移动方向上的预设移动区间值。比如,第一按钮在Y方向即竖直方向上移动,预设的移动区间值为y1~y2,y2为最大移动值,y1为最小移动值。进一步,根据预设移动区间值确定移动差值,其中,移动差值为移动区间值中的最大移动值与最小移动值之间的差值,结合上述例子,移动差值即为y2-y1
进一步,获取预设的菜单页面的最大宽度值,根据移动差值和预设的菜单页面的最大宽度值(以下简称最大宽度值)的比值计算出第二计算参数。
进一步,可以是将移动差值与最大宽度值以1比1的比例关系得到第二计算参数,第二计算参数K2=(y2-y1)/W,其中,y2为最大移动值,y1为最小移动值,y2-y1为移动差值W为最大宽度值。本实施例中,使在菜单页面和主页面滑动了一个菜单页面的最大宽度值时,控制第一按钮正好完成一个周期的移动。增强了侧滑操作与第二动画的关联性、完整性,更加地增强了侧滑界面的第二动画中第一按钮移动的可控性及流畅性。
也可以是将移动差值与最大宽度值以其它预设的比例关系得到第二计算参数,本发明实施例对此不作限定,只要满足,第二计算参数是根据移动差值和最大宽度值的比值计算出的即可。
可以理解,主页面中可以同时包含第一动画和第二动画,也可以是只包含第一动画,还可以是只包含第二动画。
如图6所示,在一个实施例中,转盘中包含第二按钮,该方法还包括第二按钮大小调整步骤,包括以下步骤:
步骤602,实时获取第二按钮对应的角度,该第二按钮对应的角度为以转盘中心点为圆心,以经过转盘中心点的水平方向的直线为起始边进行旋转达到第二按钮中心点时所经过的角度。
本实施例中,转盘中包含至少一个的第二按钮。其中第二按钮的位置会随着转盘的转动而对应变化。当有多个第二按钮时,相邻第二按钮中心点的相对位置不会发生变化。进一步,至少一个的第二按钮可以是图标按钮也可以是文字按钮,还可以是图文结合的按钮等。可以理解,当第二按钮为多个时,这多个第二按钮的类型可以相同也可以不同,本发明实施例对第二按钮的具体形式不作限定。进一步,至少一个的第二按钮按照预设规则分布于转盘的圆环上。可以是平均分布,也可以是非平均分布,本发明实施例对此不作限定。
进一步,终端实时获取至少一个的第二按钮对应的角度。其中,第二按钮对应的角度为以转盘中心点为圆心,以与用户查看视角一致的当前显示界面为参照,以经过转盘中心点的水平方向的直线为起始边进行旋转,旋转达到第二按钮的中心点时所经过的角度。比如,如图7所示,图7为与用户查看视角一致的当前显示侧滑界面,其中,转盘中心点为圆心,以经过转盘中心点的水平方向的直线l1为起始边进行旋转,当旋转到经过第二按钮B21的中心点时,所经过的角度为α,则说明第二按钮B21对应的角度为α,当旋转到第二按钮B22的中心点时,所经过的角度为β时,则说明第二按钮B22对应的角度为β。
可以理解,在转盘转动过程中,第二按钮所对应的角度也会随之发生变化。
步骤604,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。
本实施例中,终端预先设置了最大伸缩值,其中最大伸缩值等于第二按钮的大小表征参数的最大值与最小值的差值,第二按钮的大小表征参数指用于表征第二按钮大小的参数。进一步,第二按钮的大小表征参数可以是第二按钮的边长,也可以是第二按钮的半径或直径、对角线等可以表征和调节第二按钮大小的度量参数。
需要说明的是,第二按钮的边界形态可以是规则图形,比如圆形、椭圆形、规则多边形等,这种情况下,对应的第二按钮的大小表征参数可以是半径、直径、边长等参数。此外,第二按钮的边界形态还可以是各种不规则图形,这种情况下,对应的第二按钮的大小表征参数也可以是任意若干边长、对角线等参数,本发明实施例对第二按钮的具体的边界形态不作限定,同样对第二按钮的大小表征参数的类型不作限定,只要满足该大小表征参数能够表征和调节第二按钮大小即可。
进一步,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。具体地,在一个实施例中,可以根据第二按钮对应的角度、预设的最大伸缩值以及第二按钮的大小表征参数的最小值来调整至少一个的第二按钮的大小。更进一步,可以根据以下公式计算得到调整后的第二按钮的大小表征参数值M’,M’=cos(n/2+M_PI/4)*c+Mmin,其中,n为第二按钮对应的角度,M_PI为圆周率,Mmin为第二按钮的大小表征参数的最小值,c为预设的最大伸缩值,c=Mmax-Mmin,其中Mmax为第二按钮的大小表征参数的最大值。进一步,根据调整后的第二按钮的大小表征参数值M’来调整第二按钮的大小。
进一步,在一个实施例中,第二按钮的边界形态为圆形,第二按钮的大小表征参数为半径或直径。假设第二按钮的大小表征参数为半径,则可以根据第二按钮对应的角度、预设的最大伸缩值以及第二按钮的最小半径来调整第二按钮的大小,其中调整后的第二按钮的半径r’=cos(n/2+M_PI/4)*c+rmin,c=rmax-rmin,其中,n为第二按钮对应的角度,M_PI为圆周率,c为预设的最大伸缩值,rmax为第二按钮的最大半径值,rmin为第二按钮的最小半径值。进一步,根据调整后的第二按钮的半径来调整第二按钮的大小。
在另一个实施例中,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小的步骤包括:获取侧滑操作前第二按钮的大小表征参数值,根据侧滑操作前第二按钮的大小表征参数值、第二按钮对应的角度以及预设最大伸缩值来调整第二按钮的大小。
本实施例中,通过实时获取第二按钮对应的角度,根据第二按钮对应的角度来调整第二按钮的大小,其中,第二按钮实时对应的角度是间接地由滑动触控点的第一滑动速率来确定由第二按钮的转动位置确定的,因此,实现了根据滑动触控点的第一滑动速率来控制第二按钮大小的调整,增强了侧滑界面的可控性。同时,提高了侧滑界面内容显示的流畅性。
如图8所示,在一个实施例中,该方法还包括最大滑动距离完成的步骤,包括以下步骤:
步骤802,当接收到滑动停止指令时,计算从开始滑动到接收滑动停止指令时主页面所对应的已滑动距离。
本实施例中,用户在停止对作用于滑动触控点进行的侧滑操作时,生成滑动停止指令,终端根据滑动停止指令计算从开始滑动到接收滑动停止指令时主页面对应的已滑动距离。具体地,在一个实施例中,终端可以调用API,通过手势处理器计算滑动触控点对应的已滑动距离,根据滑动触控点对应的第一滑动速率与主页面对应的第三滑动速率之间的比值关系,计算出主页面对应的滑动距离。在另一个实施例中,终端可以获取接收滑动停止指令时,主页面于当前显示界面中所处的位置,根据当前所处位置与开始滑动时的所处位置进行比较,得出主页面对应的已滑动距离。
步骤804,当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间。
进一步,获取预设临界距离,将计算得到的已滑动距离与预设临界距离进行比对,当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间(以下简称所需余下时间)。可以理解,预设的最大滑动距离实际上即为菜单页面的最大宽度值(以下简称最大宽度值),即预设的菜单页面可显示的最大宽度值。
在一个实施例中,计算最大宽度值与已滑动距离的差值,该差值即为主页面完成预设最大滑动距离所需滑动的剩余距离(以下简称剩余距离),根据该剩余距离与最大宽度值的比值计算出所需余下时间。可以理解,可以将该剩余距离与菜单页面预设宽度值以1比1的比例关系得到所需余下时间。也可以是,获取预设的时间调整参数tc,根据预设时间调整参数tc、剩余距离和最大宽度值的比值计算出所需余下时间。具体地,满足以下公式:t=tc*(W-W_s)/W,其中,t为所需余下时间,W_s为已滑动距离,W为最大宽度值,W-W_s为剩余距离,tc为时间调整参数。通过设置时间调整参数,可以在需要展现不同的滑动效果时,不需要改动菜单页面预设宽度值,只需要改动时间调整参数即可,相较于改变反应界面比例的菜单页面预设宽度值而言,改动时间调整参数更加的快捷、更加地节省操作成本和资源成本。
在另一个实施例中,终端中预先设置了所需余下时间,当已滑动距离大于或等于预设临界距离时,则获取预设的所需余下时间。进一步,终端中预先设置了已滑动距离和所需余下时间之间的对应关系,即不同的已滑动距离设置了不同的所需余下时间,根据该对应关系,获取已滑动距离所对应的预设的所需余下时间。
步骤806,根据第三滑动速率或第一预设速率确定主页面的第一初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第一初始速率计算主页面对应的第一加速度。
进一步,终端会获取主页面的第一初始速率。具体地,可以将第三滑动速率作为第一初始速率,也可以获取第一预设速率,以第一预设速率作为第一初始速率。更进一步,当接收滑动停止指令时,第三滑动速率不为零时,则可以以第三滑动速率作为第一初始速率,也可以获取第一预设速率,将第一预设速率作为第一初始速率。当接收滑动停止指令时,第三滑动速率为零时,则获取第一预设速率,以第一预设速率作为第一初始速率。再进一步,终端中预先设置了已滑动距离与第一预设速率之间的对应关系,当要将第一预设速率作为第一初始速率时,可以根据该对应关系,获取与已滑动距离对应的第一预设速率作为第一初始速率。
接着,终端会根据所需余下时间和第一初始速率计算主页面对应的第一加速度。具体地,终端会确定第一路程,根据第一路程、所需余下时间和第一初始速率计算主页面对应的第一加速度。需要说明的是,终端可以将在接收到滑动停止指令时,主页面完成预设的最大滑动距离所需滑动的剩余距离作为第一路程,也可以获取预设的加速度计算路程作为第一路程,本发明实施例对此不作限定。其中,预设的加速度计算路程大于或等于预设的菜单页面的最大宽度值与预设临界距离的差值。
进一步,可以结合以下公式进行第一加速度的计算,第一初始速率为V始1,第一路程为S1,所需余下时间为t,则根据公式v始1t+0.5*a1*t2=S1计算出第一加速度a1。可以理解,当第一路程为剩余距离、第一初始速率为主页面的第三滑动速率时,该公式即为V3t+0.5*a1*t2=W-W_s,其中W为最大宽度值,W_s为已滑动距离,W-W_s为剩余距离,V3为第三滑动速率,t为所需余下时间。本实施例中,第一加速度可以是根据第一初始速率和剩余距离以及完成剩余距离所需时间计算出来的,这种情况下,当主页面刚好滑动到最大滑动距离时,主页面的速度刚好也减至0。增强了主页面滑动的过渡性,使主页面滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
步骤808,控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离。
进一步,终端会控制主页面根据第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离,即控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动,直至将剩余距离滑动完毕,使主页面完成预设的最大滑动距离的滑动。
本实施例中,当接收到滑动操作指令,已滑动大于或等于预设临界距离时,则很大程度上可以反映用户所需要展示的界面,而在侧滑操作时,这个用户所需要展示的界面状态是需要主页面完成最大滑动距离时所展现的界面。比如,用户侧滑操作时,侧滑界面当前显示界面是整个主页面,菜单页面还未显示,则用户侧滑到超过预设临界距离,则说明用户是希望将菜单页面显示出来的,此时,则控制主页面完成最大滑动距离,以将菜单页面以最大宽度值显示出来。而不需要用户一直滑动到屏幕最边缘位置,才使菜单页面以最大宽度值显示出来,节省了用户的操作成本,对应的也节省了监测用户多余的侧滑操作的滑动检测资源成本。
此外,通过生成加速度,对主页面的滑动进行减速处理,使主页面的滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
可以理解,在一个实施例中,步骤802至步骤808中的主页面可以被菜单页面进行替代,以实现当接收到滑动停止指令,已滑动距离大于或等于预设临界距离时,对菜单页面的控制。
在一个实施例中,当已滑动距离小于预设临界距离时,则控制主页面返回至滑动操作前所处位置。具体地,可以获取预设的返回时间和主页面的返回初始速率,根据预设的返回时间和返回初始速率和主页面的已滑动距离计算主页面的返回加速度,控制主页面以返回初始速率和返回加速度按照侧滑方向的对应反方向减速滑动至滑动操作前所处位置。
本实施例中,当接收到滑动操作指令,已滑动小于预设临界距离时,则很大程度上可以反映用户不想要进行侧滑操作,比如用户误操作。此时,则控制主页面返回至侧滑操作前的原始位置。避免了因执行误操作造成的资源的浪费。
此外,通过生成返回加速度,将主页面的返回滑动进行减速处理,使主页面的返回滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
可以理解,在其他实施例中,本实施例中的主页面可以被菜单页面进行替代,以实现当接收到滑动停止指令,已滑动距离小于预设临界距离时,对菜单页面的控制。
进一步,根据预设的返回时间控制主页面中的动画返回至滑动操作前所处显示状态。
在一个实施例中,在获取主页面完成预设的最大滑动距离所需余下时间的步骤之后还包括:根据动画的运动参数中的运动速率或第二预设速率确定动画的第二初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第二初始速率计算动画的第二加速度,根据第二加速度和第二初始速率减速执行一个周期内的剩余动画的步骤。
本实施例中,动画的运动参数中包含动画的运动速率。
在获取主页面完成预设的最大滑动距离所需余下时间(以下简称,所需余下时间)之后,终端根据会获取动画的第二初始速率,具体地,可以将动画的运动速率作为第二初始速率,也可以获取第二预设速率,以第二预设速率作为第二初始速率。
更进一步,当接收滑动停止指令时,动画的运动速率不为零时,则可以以动画的运动速率作为第二初始速率,也可以获取第二预设速率,将第二预设速率作为第二初始速率。当接收滑动停止指令时,动画的运动速率为零时,则获取第二预设速率,以第二预设速率作为第二初始速率。再进一步,终端设置了一个周期内已执行的动画路程参数与第二预设速率之间的对应关系,当以第二预设速率作为第二初始速率时,则根据该对应关系,获取与一个周期内已执行的动画路程参数对应的第二预设速率作为第二初始速率。
进一步,根据所需余下时间和第二初始速率计算动画的第二加速度。具体地,终端会确定第二路程,根据第二路程、所需余下时间和第二初始速率计算动画对应的第二加速度。其中,第二路程可以指在接收的滑动停止指令时,一个周期内动画的剩余路程,即可以根据一个周期内动画的总路程与一个周期内已执行的动画路程的差值得到第二路程。可以理解,第二路程可以是直线路程,也可以是曲线路程。
进一步,可以结合以下公式进行第二加速度的计算,第二初始速率为V始2,第二路程为S2,所需余下时间为t,则根据公式V始2t+0.5*a2*t2=S2计算出第二加速度a2
在其他实施例中,第二路程还可以是预设的任意路程,并根据预设的任意路程计算第二加速度,控制动画根据第二加速度以第二初始速率逐渐的减速进行动画的执行直至第二初始速率减为0。
本实施例中,在获取主页面完成预设的最大滑动距离所需余下时间,根据与控制主页面移动的相同时间来控制剩余动画的执行,增强了动画的执行与主页面的滑动的关联性,提高了动画与主页面的一体性以及完整性。
在一个实施例中,动画包含第一动画,当第一动画包含转盘时,则第二初始速率为转盘初始速率,即根据转盘的转动速率或第二预设速率确定转盘的初始速率。本实施例中,根据主页面完成预设的最大滑动距离所需余下时间和第二初始速率计算动画的第二加速度,根据第二加速度和第二初始速率执行一个周期内的剩余动画的步骤,包括:计算转盘已转动弧长,根据转盘已转动弧长、主页面完成预设的最大滑动距离所需余下时间、转盘初始速率计算出转盘的加速度,根据转盘加速度和转盘初始速率执行一个周期内的剩余转盘转动操作。
本实施例中,动画包含第一动画,当第一动画包含转盘时,终端会获取从转盘开始转动到接收滑动停止指令时,转盘已转动的弧长,根据已转动弧长计算出一个周期内转盘的剩余转动弧长。进一步,根据一个周期内转盘的剩余转动弧长、转盘初始速率、所需余下时间计算转盘的加速度。具体地,可以结合以下公式进行转盘加速度a的计算:VC始t+0.5*a*t2=2M_PI*R-L,VC始为转盘初始速率,t为所需余下时间,R为转盘半径,L为已转动弧长。
其中,VC始可以是转盘的转动速率,也可以是第二预设速率。进一步,当接收滑动停止指令时,转盘的转动速率不为零时,则可以以转盘的转动速率作为转盘初始速率,也可以获取第二预设速率,将第二预设速率作为转盘初始速率。当接收滑动停止指令时,转盘的转动速率为零时,则获取第二预设速率,以第二预设速率作为转盘初始速率。
进一步,终端中预先设置了已转动弧长与第二预设速率之间的对应关系,当要将第二预设速率作为转盘初始速率时,可以根据该对应关系,获取与已转动弧长对应的第二预设速率作为转盘初始速率。
可以理解,可以在开始转动时选定转盘上某一参考点,将开始转动时该参考点所处位置与接收滑动停止指令时该参考点所处位置进行比对,计算出转盘转动的圆心角,根据圆心角计算出转盘已转动的弧长。还可以根据已转动的弧度和转盘半径的乘积来计算已转动的弧长。
本实施例中,在获取主页面完成预设的最大滑动距离所需余下时间,根据与控制主页面移动的相同时间来控制转盘的一个周期内的余下转动,增强了动画的执行与主页面的滑动的关联性,提高了动画与主页面的一体性以及完整性。
可以理解,在其他实施例中,在控制转盘完成剩余周期内的转动的同时,也可以根据转盘实时的转动情况调整转盘中的第二按钮的大小,具体的调整方式与上述实施例中描述的通过滑动触控点控制转盘转动时对应的第二按钮大小的调整方式相同,同样是,通过实时获取第二按钮对应的角度,第二按钮对应的角度为以转盘中心点为圆心,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。本实施例对此不再作详细描述。
在一个实施例中,在根据转盘加速度和转盘初始速率执行一个周期内的剩余转盘转动操作的步骤之后,还包括:
获取转盘中当前第二按钮,根据第二按钮与至少一个的第一按钮之间的对应关系,获取当前第二按钮对应的至少一个的第一按钮,将对应的至少一个的第一按钮进行展示。
本实施例中,当根据转盘加速度和转盘初始速率执行一个周期内的剩余转盘转动操作的步骤之后,获取转盘中当前第二按钮。其中,当前第二按钮指处于当前选中状态的第二按钮,进一步,当前第二按钮的大小表征参数值为最大值Mmax
进一步,终端中预先设置了第二按钮与至少一个的第一按钮之间的对应关系,根据该对应关系,获取当前第二按钮对应的至少一个的第一按钮,将对应的至少一个的第一按钮进行展示。更进一步,第一按钮和第二按钮之间的对应关系,用于表征第一按钮是第二按钮对应的分项按钮,即第一按钮是对第二按钮所表示内容的各项细化体现。
如图9所示,图9为一个实施例中的侧滑界面中主页面的显示界面。其中,当前第二按钮为“热门精选”,与当前第二按钮对应的第一按钮为B11“健康体检”、B12“上门理赔”和B13“物业缴费”。则将对应的第一按钮B11、B12和B13进行展示。可以理解,B11“健康体检”、B12“上门理赔”和B13“物业缴费”即为对“热门精选”内容的细化体现。
本实施例中,通过第一按钮和第二按钮将第一动画和第二动画关联起来,相当于根据第一动画和第二动画又组成了一个大的动画,在有限的显示空间下,增加了显示内容的多样性,提高了屏幕的显示利用率。
在一个实施例中,将对应的至少一个的第一按钮进行展示的步骤,包括:
根据第一按钮的移动速率或第三预设速率确定第一按钮的第三初始速率,控制第一按钮以第三初始速率模拟弹性运动至停止在弹性运动所在方向上预设的最终停止区域。
本实施例中,终端会确定第一按钮的第三初始速率。具体地,以第一按钮的移动速率或第三预设速率作为第一按钮的第三初始速率。进一步,可以参照前文描述的方法确定何时将第三预设速率或第一按钮的移动速率作为第三初始速率,在本步骤中对此不作赘述。
进一步,终端中在弹性运动所在方向上预设了最终停止区域。其中,最终停止区域可以是一个位置区间。终端会控制第一按钮以第三初始速率模拟弹性运动,并控制第一按钮模拟弹性运动后停止在弹性运动所在方向上预设的最终停止区域。
这里,模拟弹性运动即控制第一按钮以弹性运动的运动形式进行展示。即控制第一按钮在至少一个的方向反转位置之间移动。其中,方向反转位置指到达该位置时,第一按钮的移动方向发生反转。比如,第一按钮从上一个方向反转位置Y1向下一个方向反转位置Y2移动时,移动方向是竖直向下,则达到方向反转位置Y2时,移动方向发生反转,变为竖直向上,则第一按钮以竖直向上的方向从方向反转位置Y2向下一方向反转位置Y3移动,以此类推,最终控制第一按钮停止在弹性运动所在方向上预设的最终停止区域。
其中,在模拟弹性运动时,可以通过获取预设的上一方向反转位置到下一方向反转位置的预设距离和加速度来实现移动速率的递减,以实现模拟弹性运动。通过模拟弹性运动,可以使过渡更平滑,更加的符合自然力学,相较于直接地或者突然的显示而言,能够降低对显示器带来的负担。
可以理解,在其他实施例中,可以将与当前第二按钮对应的第一按钮在最终停止区域直接由无到有地渐变呈现。也可以控制第一按钮按照预设直线运动或曲线运动的路径移动至预设的最终停止区域。本发明实施例对此不作限定。
如图10所示,在一个实施例中,提供了一种侧滑界面的显示控制装置,该装置包括:
速度监测模块1002,用于实时获取滑动触控点的第一滑动速度,滑动触控点作用于侧滑界面上的任意位置,第一滑动速度包含第一滑动速率和第一滑动方向。
计算模块1004,用于根据第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向。
滑动控制模块1006,用于控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。
在一个实施例中,主页面中包含动画;计算模块1004还用于根据第一滑动速度计算动画的运动参数。该装置还包括:动画执行模块,用于根据运动参数执行动画。
在一个实施例中,动画包含第一动画和/或第二动画,第一动画包含转盘,第二动画包含第一按钮;本实施例中,计算模块1004还用于获取第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率及转动方向;和/或获取第二计算参数,根据第二计算参数和第一滑动速度计算第一按钮的移动速率及对应的移动方向。
在一个实施例中,计算模块1004还用于获取转盘的周长,获取预设的菜单页面的最大宽度值,根据转盘的周长和菜单页面的最大宽度值的比值计算出第一计算参数。
在一个实施例中,计算模块1004还用于获取至少一个的第一按钮对应的预设移动区间值,根据预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据移动差值和菜单页面的最大宽度值的比值计算出第二计算参数。
在一个实施例中,转盘中包含第二按钮;该装置还包括:对应角度确定模块,用于实时获取第二按钮对应的角度,第二按钮对应的角度为以转盘中心点为圆心,以经过转盘中心点的水平方向的直线为起始边进行旋转达到第二按钮的中心点时所经过的角度。调整模块,用于根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。
在一个实施例中,计算模块1004还用于当接收到滑动停止指令时,计算从开始滑动到接收滑动停止指令时主页面所对应的已滑动距离。
获取模块,用于当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间。
计算模块1004还用于根据第三滑动速率或第一预设速率确定主页面的第一初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第一初始速率计算主页面对应的第一加速度。
滑动控制模块1006还用于控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离。
在一个实施例中,获取模块还用于根据动画的运动参数中的运动速率或第二预设速率确定动画的第二初始速率。
计算模块1004还用于根据主页面完成预设的最大滑动距离所需余下时间和第二初始速率计算动画的第二加速度。动画执行模块还用于根据第二加速度和第二初始速率减速执行一个周期内的剩余动画。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种侧滑界面的显示控制方法,所述方法包括以下步骤:
实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;
控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
2.根据权利要求1所述的方法,其特征在于,所述主页面中包含动画;在所述实时获取滑动触控点的第一滑动速度的步骤之后,还包括:
根据所述第一滑动速度计算所述动画的运动参数,根据所述运动参数执行所述动画。
3.根据权利要求2所述的方法,其特征在于,所述动画包含第一动画和/或第二动画,所述第一动画包含转盘,所述第二动画包含第一按钮;
所述根据所述第一滑动速度计算所述动画的运动参数的步骤,包括:
获取第一计算参数,根据所述第一计算参数和所述第一滑动速度计算所述转盘的转动速率及转动方向;和/或
获取第二计算参数,根据所述第二计算参数和所述第一滑动速度计算所述第一按钮的移动速率及对应的移动方向。
4.根据权利要求3所述的方法,其特征在于,在获取的第一计算参数的步骤之前,还包括:
获取转盘的周长,获取预设的菜单页面的最大宽度值,根据所述转盘的周长和所述菜单页面的最大宽度值的比值计算出第一计算参数。
5.根据权利要求3所述的方法,其特征在于,在获取的第二计算参数的步骤之前,还包括:
获取至少一个的第一按钮对应的预设移动区间值,根据所述预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据所述移动差值和所述菜单页面的最大宽度值的比值计算出第二计算参数。
6.根据权利要求3所述的方法,其特征在于,所述转盘中包含第二按钮;所述方法还包括:
实时获取所述第二按钮对应的角度,所述第二按钮对应的角度为以转盘中心点为圆心,以经过所述转盘中心点的水平方向的直线为起始边进行旋转达到所述第二按钮的中心点时所经过的角度;
根据所述第二按钮对应的角度和预设最大伸缩值调整所述第二按钮的大小。
7.根据权利要求1或2所述的方法,其特征在于,所述方法还包括:
当接收到滑动停止指令时,计算从开始滑动到接收所述滑动停止指令时所述主页面所对应的已滑动距离;
当所述已滑动距离大于或等于预设临界距离时,则获取所述主页面完成预设的最大滑动距离所需余下时间;
根据所述第三滑动速率或所述第一预设速率确定所述主页面的第一初始速率,根据所述主页面完成预设的最大滑动距离所需余下时间和所述第一初始速率计算所述主页面对应的第一加速度;
控制所述主页面以所述第一初始速率和所述第一加速度按照所述侧滑方向减速滑动以完成所述预设的最大滑动距离。
8.根据权利要求7所述的方法,其特征在于,在所述获取所述主页面完成预设的最大滑动距离所需余下时间的步骤之后,还包括:
根据所述动画的运动参数中的运动速率或所述第二预设速率确定所述动画的第二初始速率;
根据所述主页面完成预设的最大滑动距离所需余下时间和所述第二初始速率计算所述动画的第二加速度,根据第二加速度和所述第二初始速率减速执行一个周期内的剩余动画。
9.一种侧滑界面的显示控制装置,其特征在于,所述装置包括:
速度监测模块,用于实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
计算模块,用于根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;
滑动控制模块,用于控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
10.根据权利要求9所述的装置,其特征在于,所述主页面中包含动画;所述计算模块还用于根据所述第一滑动速度计算所述动画的运动参数;
所述装置还包括:
动画执行模块,用于根据所述运动参数执行所述动画。
CN201610297106.1A 2016-05-06 2016-05-06 侧滑界面的显示控制方法和装置 Active CN105975181B (zh)

Priority Applications (8)

Application Number Priority Date Filing Date Title
CN201610297106.1A CN105975181B (zh) 2016-05-06 2016-05-06 侧滑界面的显示控制方法和装置
PCT/CN2017/077547 WO2017190560A1 (zh) 2016-05-06 2017-03-21 侧滑界面的显示控制方法和装置、终端和存储介质
US16/075,314 US20190073104A1 (en) 2016-05-06 2017-03-21 Display control method and device for side sliding interface, terminal and storage medium
EP17792387.7A EP3454195A4 (en) 2016-05-06 2017-03-21 DISPLAY CONTROL METHOD AND DEVICE FOR LATERALLY SLIDING USER INTERFACE, TERMINAL AND STORAGE MEDIUM
AU2017259235A AU2017259235B2 (en) 2016-05-06 2017-03-21 Display control method and device for side sliding interface, terminal and storage medium
KR1020187018398A KR102215712B1 (ko) 2016-05-06 2017-03-21 사이드 슬라이딩 인터페이스를 위한 디스플레이 제어 방법 및 장치, 단말기 및 저장 매체
JP2018519722A JP6549796B2 (ja) 2016-05-06 2017-03-21 サイドスライドインターフェースの表示制御方法と装置、端末と記憶媒体
SG11201805502WA SG11201805502WA (en) 2016-05-06 2017-03-21 Display control method and device for side sliding interface, terminal and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610297106.1A CN105975181B (zh) 2016-05-06 2016-05-06 侧滑界面的显示控制方法和装置

Publications (2)

Publication Number Publication Date
CN105975181A true CN105975181A (zh) 2016-09-28
CN105975181B CN105975181B (zh) 2019-01-04

Family

ID=56991309

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610297106.1A Active CN105975181B (zh) 2016-05-06 2016-05-06 侧滑界面的显示控制方法和装置

Country Status (8)

Country Link
US (1) US20190073104A1 (zh)
EP (1) EP3454195A4 (zh)
JP (1) JP6549796B2 (zh)
KR (1) KR102215712B1 (zh)
CN (1) CN105975181B (zh)
AU (1) AU2017259235B2 (zh)
SG (1) SG11201805502WA (zh)
WO (1) WO2017190560A1 (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106502514A (zh) * 2016-11-04 2017-03-15 上海传英信息技术有限公司 侧滑菜单的控制方法及用户终端
WO2017190560A1 (zh) * 2016-05-06 2017-11-09 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置、终端和存储介质
CN107450911A (zh) * 2017-07-05 2017-12-08 口碑(上海)信息技术有限公司 动画元素的播放方法、装置以及电子设备
CN108845750A (zh) * 2018-06-08 2018-11-20 北京奇虎科技有限公司 一种启动控件的方法及终端设备
CN108897489A (zh) * 2018-07-25 2018-11-27 上海携程商务有限公司 页面返回的交互方法、***、设备和存储介质
CN110321042A (zh) * 2018-03-30 2019-10-11 阿里巴巴集团控股有限公司 界面信息展示方法、装置及电子设备
CN110471594A (zh) * 2019-08-22 2019-11-19 北京字节跳动网络技术有限公司 一种页面调整方法、装置、设备及介质
CN111290691A (zh) * 2020-01-16 2020-06-16 北京京东振世信息技术有限公司 用于操作页面的方法、装置、计算机设备及可读存储介质

Families Citing this family (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10521188B1 (en) 2012-12-31 2019-12-31 Apple Inc. Multi-user TV user interface
US11966560B2 (en) 2016-10-26 2024-04-23 Apple Inc. User interfaces for browsing content from multiple content applications on an electronic device
CN109814781B (zh) * 2017-11-22 2023-09-08 腾讯数码(天津)有限公司 页面滑动方法、装置
CN108984096A (zh) * 2018-07-04 2018-12-11 Oppo广东移动通信有限公司 触控操作方法、装置、存储介质及电子设备
CN108845756B (zh) * 2018-07-04 2021-02-02 Oppo广东移动通信有限公司 触控操作方法、装置、存储介质及电子设备
EP3928526A1 (en) 2019-03-24 2021-12-29 Apple Inc. User interfaces for viewing and accessing content on an electronic device
CN114115676A (zh) * 2019-03-24 2022-03-01 苹果公司 包括内容项的可选表示的用户界面
CN114297620A (zh) 2019-03-24 2022-04-08 苹果公司 用于媒体浏览应用程序的用户界面
WO2020243645A1 (en) 2019-05-31 2020-12-03 Apple Inc. User interfaces for a podcast browsing and playback application
US11863837B2 (en) 2019-05-31 2024-01-02 Apple Inc. Notification of augmented reality content on an electronic device
CN112860141A (zh) * 2019-11-28 2021-05-28 华为技术有限公司 一种操作屏幕图标的方法及装置
US11843838B2 (en) 2020-03-24 2023-12-12 Apple Inc. User interfaces for accessing episodes of a content series
US11899895B2 (en) 2020-06-21 2024-02-13 Apple Inc. User interfaces for setting up an electronic device
KR20220065400A (ko) * 2020-11-13 2022-05-20 삼성전자주식회사 플렉서블 디스플레이를 포함하는 전자 장치 및 이의 제어 방법
CN112782998B (zh) * 2020-12-31 2023-07-07 追觅科技(上海)有限公司 窗帘控制方法、装置和存储介质
US11934640B2 (en) 2021-01-29 2024-03-19 Apple Inc. User interfaces for record labels
CN114465969B (zh) * 2021-12-23 2023-07-04 珠海格力电器股份有限公司 通讯消息组的管理方法、装置、设备和存储介质
US12001655B2 (en) * 2022-05-11 2024-06-04 Supercell Oy Synchronizing user actions to account for data delay
CN115225418A (zh) * 2022-06-20 2022-10-21 广东好太太智能家居有限公司 一种窗帘调节方法、***、装置及介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103838510A (zh) * 2014-02-27 2014-06-04 北京六间房科技有限公司 一种界面控制装置
US20150160853A1 (en) * 2013-12-05 2015-06-11 Naver Corporation Video transition method and video transition system
CN105144071A (zh) * 2013-03-15 2015-12-09 苹果公司 用于管理同时打开的软件应用程序的设备、方法、和图形用户界面
CN105393201A (zh) * 2013-06-09 2016-03-09 苹果公司 用于管理同时打开的软件应用的设备、方法和图形用户界面

Family Cites Families (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8028250B2 (en) * 2004-08-31 2011-09-27 Microsoft Corporation User interface having a carousel view for representing structured data
US7747968B2 (en) * 2006-09-11 2010-06-29 Apple Inc. Content abstraction presentation along a multidimensional path
DE102007039442A1 (de) * 2007-08-21 2009-02-26 Volkswagen Ag Verfahren zum Anzeigen von Informationen in einem Fahrzeug und Anzeigeeinrichtung für ein Fahrzeug
US20120262462A1 (en) * 2011-04-18 2012-10-18 Johan Montan Portable electronic device for displaying images and method of operation thereof
WO2013106289A1 (en) * 2012-01-09 2013-07-18 Airbiquity Inc. User interface for mobile device
KR101895818B1 (ko) * 2012-04-10 2018-09-10 삼성전자 주식회사 단말기에서 전자책과 연관된 피드백 제공 방법 및 장치
US20130290116A1 (en) * 2012-04-27 2013-10-31 Yahoo! Inc. Infinite wheel user interface
KR102126292B1 (ko) * 2012-11-19 2020-06-24 삼성전자주식회사 이동 단말에서 화면 표시 방법 및 이를 위한 이동 단말
US20140344755A1 (en) * 2013-05-16 2014-11-20 Avaya, Inc. Method and system for rotational list based user interface
KR20150025635A (ko) * 2013-08-29 2015-03-11 삼성전자주식회사 스크린을 제어하는 전자 장치 및 방법
US10019146B2 (en) * 2014-09-04 2018-07-10 Home Box Office, Inc. Snap points including ranges
CN104793843B (zh) * 2015-03-26 2018-04-13 小米科技有限责任公司 桌面显示方法及装置
US10871868B2 (en) * 2015-06-05 2020-12-22 Apple Inc. Synchronized content scrubber
CN105975181B (zh) * 2016-05-06 2019-01-04 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105144071A (zh) * 2013-03-15 2015-12-09 苹果公司 用于管理同时打开的软件应用程序的设备、方法、和图形用户界面
CN105393201A (zh) * 2013-06-09 2016-03-09 苹果公司 用于管理同时打开的软件应用的设备、方法和图形用户界面
US20150160853A1 (en) * 2013-12-05 2015-06-11 Naver Corporation Video transition method and video transition system
CN103838510A (zh) * 2014-02-27 2014-06-04 北京六间房科技有限公司 一种界面控制装置

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017190560A1 (zh) * 2016-05-06 2017-11-09 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置、终端和存储介质
CN106502514A (zh) * 2016-11-04 2017-03-15 上海传英信息技术有限公司 侧滑菜单的控制方法及用户终端
CN106502514B (zh) * 2016-11-04 2019-09-17 上海传英信息技术有限公司 侧滑菜单的控制方法及用户终端
CN107450911A (zh) * 2017-07-05 2017-12-08 口碑(上海)信息技术有限公司 动画元素的播放方法、装置以及电子设备
CN110321042A (zh) * 2018-03-30 2019-10-11 阿里巴巴集团控股有限公司 界面信息展示方法、装置及电子设备
CN110321042B (zh) * 2018-03-30 2022-08-05 阿里巴巴集团控股有限公司 界面信息展示方法、装置及电子设备
CN108845750A (zh) * 2018-06-08 2018-11-20 北京奇虎科技有限公司 一种启动控件的方法及终端设备
CN108897489A (zh) * 2018-07-25 2018-11-27 上海携程商务有限公司 页面返回的交互方法、***、设备和存储介质
CN110471594A (zh) * 2019-08-22 2019-11-19 北京字节跳动网络技术有限公司 一种页面调整方法、装置、设备及介质
CN110471594B (zh) * 2019-08-22 2022-02-22 北京字节跳动网络技术有限公司 一种页面调整方法、装置、设备及介质
CN111290691A (zh) * 2020-01-16 2020-06-16 北京京东振世信息技术有限公司 用于操作页面的方法、装置、计算机设备及可读存储介质

Also Published As

Publication number Publication date
AU2017259235B2 (en) 2020-04-02
EP3454195A4 (en) 2020-02-05
JP2018530837A (ja) 2018-10-18
SG11201805502WA (en) 2018-07-30
KR102215712B1 (ko) 2021-02-17
EP3454195A1 (en) 2019-03-13
AU2017259235A1 (en) 2018-07-05
KR20190003454A (ko) 2019-01-09
US20190073104A1 (en) 2019-03-07
WO2017190560A1 (zh) 2017-11-09
CN105975181B (zh) 2019-01-04
JP6549796B2 (ja) 2019-07-24

Similar Documents

Publication Publication Date Title
CN105975181A (zh) 侧滑界面的显示控制方法和装置
US10222952B2 (en) Hybrid systems and methods for low-latency user input processing and feedback
JP2022000769A (ja) ユーザインターフェースプログラムおよびゲームプログラム
CN105739888B (zh) 一种用于配置虚拟键盘动态显示效果的方法与装置
JP6392881B2 (ja) 応用素子の代替的グラフィック表示の事前の生成による入力に対する低レイテンシの視覚的応答およびグラフィック処理ユニットの入力処理
CN102929556B (zh) 一种基于触摸屏的交互控制方法及设备
JP5771329B2 (ja) 動的壁紙の生成方法及び生成装置
CN105808071B (zh) 一种显示控制方法、装置和电子设备
JP2020526831A (ja) シミュレーションされた三次元(3d)環境におけるインタラクティブな入力制御
CN107728905A (zh) 一种弹幕显示方法、装置及存储介质
US20150029197A1 (en) Systems and Methods for Visually Creating and Editing Scrolling Actions
CN110727496A (zh) 图形用户界面的布局方法、装置、电子设备及存储介质
CN109663345A (zh) 一种3d游戏的信息处理方法和装置
CN106095139B (zh) 一种在投影交互***中提升线条绘制速度的方法
KR20160041898A (ko) 규정된 크로스 컨트롤 거동을 이용한 저감된 제어 응답 레이턴시
WO2018233537A1 (zh) 界面内容的动态显示方法、装置及其设备
CN108829256A (zh) 一种控制方法及装置
CN103645805A (zh) 体感方式的控件操控方法及***
CN107291344A (zh) 一种内容选择的方法、装置及终端设备
CN115937364A (zh) 交互动画的处理方法、装置、存储介质及电子设备
CN102591646B (zh) 一种同时缩放多个wpf窗体的方法和装置
CN106200923A (zh) 一种虚拟现实***的控制方法和装置
CN111311760A (zh) 一种三维建筑物展示方法、***、装置及存储介质
CN103995658B (zh) 一种信息处理方法、电子设备及无线控制装置
US11662822B1 (en) Systems and methods for generating pseudo haptic feedback

Legal Events

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