WO2017190560A1 - 侧滑界面的显示控制方法和装置、终端和存储介质 - Google Patents

侧滑界面的显示控制方法和装置、终端和存储介质 Download PDF

Info

Publication number
WO2017190560A1
WO2017190560A1 PCT/CN2017/077547 CN2017077547W WO2017190560A1 WO 2017190560 A1 WO2017190560 A1 WO 2017190560A1 CN 2017077547 W CN2017077547 W CN 2017077547W WO 2017190560 A1 WO2017190560 A1 WO 2017190560A1
Authority
WO
WIPO (PCT)
Prior art keywords
sliding
rate
animation
button
preset
Prior art date
Application number
PCT/CN2017/077547
Other languages
English (en)
French (fr)
Inventor
王晓章
Original Assignee
平安科技(深圳)有限公司
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 平安科技(深圳)有限公司 filed Critical 平安科技(深圳)有限公司
Priority to EP17792387.7A priority Critical patent/EP3454195A4/en
Priority to JP2018519722A priority patent/JP6549796B2/ja
Priority to KR1020187018398A priority patent/KR102215712B1/ko
Priority to AU2017259235A priority patent/AU2017259235B2/en
Priority to US16/075,314 priority patent/US20190073104A1/en
Priority to SG11201805502WA priority patent/SG11201805502WA/en
Publication of WO2017190560A1 publication Critical patent/WO2017190560A1/zh

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/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

Definitions

  • the present application relates to the field of computer technology, and in particular, to a display control method and apparatus for a side sliding interface, a terminal, and a storage medium.
  • menu navigation refers to navigation including menu items such as personal data, settings, etc.
  • menu page can be hidden and displayed by sliding the main page or clicking the avatar.
  • the control of the main page is usually controlled to control whether the lower menu page of the main page is displayed.
  • the main page is controlled to slide, it is usually based on the last sliding operation. End position to determine how to move the main page. Therefore, when the conventional method is side-slip, the controllability of the side-slip interface is very low.
  • a display control method, a terminal, and a storage medium of a side sliding interface are provided.
  • a display control method for a sliding interface includes:
  • the first sliding speed includes a first sliding rate and a first sliding direction
  • a display control device for a sliding interface includes:
  • a speed monitoring module configured to acquire a first sliding speed of the sliding touch point in real time, where the sliding touch point acts on any position on the side sliding interface, the first sliding speed includes a first sliding rate and a first sliding direction ;
  • a calculation module configured to calculate a second sliding rate corresponding to the menu page and a third sliding rate corresponding to the main page according to the first sliding rate, and determine the menu page and the location according to the first sliding direction The side sliding direction corresponding to the main page;
  • a sliding control module configured to control the menu page and the main page to perform corresponding sliding according to the sliding direction at the second sliding rate and the third sliding rate, respectively.
  • a terminal comprising a memory and a processor, wherein the memory stores instructions that, when executed by the processor, cause the processor to perform the following steps:
  • One or more non-volatile readable storage media storing computer-executable instructions, when executed by one or more processors, cause the one or more processors to perform the following steps:
  • Figure 1 is a block diagram of a terminal in an embodiment
  • FIG. 2 is a flow chart showing a display control method of a side sliding interface in an embodiment
  • FIG. 3 is a schematic view of a side sliding interface in one embodiment
  • FIG. 4 is a schematic diagram of an interface for describing a display control method of a side-slip interface in one embodiment
  • FIG. 5 is a schematic diagram of an interface for describing a display control method of a side-slip interface in another embodiment
  • FIG. 6 is a schematic diagram of an interface for describing a display control method of a side-slip interface in still another embodiment
  • FIG. 7 is a flow chart of a second button size adjustment method in an embodiment
  • FIG. 8 is a schematic diagram of a side sliding interface for describing an angle corresponding to a second button in one embodiment
  • FIG. 9 is a flow chart of a method for completing a maximum sliding distance in one embodiment
  • FIG. 10 is a schematic diagram of an interface for describing a display control method of a side-slip interface in still another embodiment.
  • Figure 11 is a block diagram of a display control device for a side-slip interface in one embodiment.
  • a terminal is provided on which an application can be installed.
  • the terminal can be a mobile phone, a tablet computer, a notebook computer, a desktop computer, or the like.
  • the terminal includes a processor connected via a system bus, an internal memory, a non-volatile storage medium, a network interface, a display screen, and an input device.
  • the processor is used to provide computing and control capabilities to support the operation of the entire terminal.
  • the non-volatile storage medium of the terminal stores an operating system and computer-executable instructions executable by the processor to implement a display control method of a side-slip interface provided by the following embodiments.
  • the internal memory in the terminal provides an environment for the operation of the operating system and computer executable instructions in the non-volatile storage medium.
  • the network interface is used to connect to the network for communication.
  • the display screen of the terminal may be a liquid crystal display or an electronic ink display or the like.
  • the display screen can be used as an output device of the terminal for displaying various interfaces, such as a menu page or a main page.
  • the input device may be a touch layer covered on the display screen, or may be a button, a trackball or a touchpad provided on the outer casing of the electronic device, or may be an external keyboard, a touchpad or a mouse, etc., for inputting by the user.
  • An operational command for example, in the present embodiment, allows the user to input relevant instructions for the sliding operation.
  • FIG. 1 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the terminal to which the solution of the present application is applied.
  • the specific terminal may include a ratio. More or fewer components are shown in the figures, or some components are combined, or have different component arrangements.
  • a display control method for a side-slip interface is provided.
  • the method is applied to the terminal shown in FIG. 1 as an example, and includes the following steps:
  • step S202 the first sliding speed of the sliding touch point is obtained in real time, and the sliding touch point acts on the side.
  • the first sliding speed includes a first sliding rate and a first sliding direction.
  • the user performs a sliding operation on the sliding interface displayed by the terminal. Specifically, the user touches any position on the sliding interface of the terminal to generate a sliding touch point to perform a sliding operation.
  • the side sliding interface is used to indicate the interface displayed on the screen of the terminal when the side sliding operation is performed, and may be the main page that is beginning to receive the side sliding operation but has not yet displayed the menu page, or may be the side sliding out of the menu page. , the displayed menu page and the overall interface of the main page.
  • menu page refers to the page where the menu bar can be hidden and displayed by the sliding operation.
  • the main page refers to the page used to display the main business content.
  • the side sliding interface Assume that the top corner of the terminal screen is the coordinate origin (0,0), and the coordinates of any other points on the screen are (x, y).
  • the actual values can be used to default the positive values of x and y, and the maximum coordinate value on the screen ( x max , y max ). Then, when performing the side sliding operation, the side sliding interface is the interface displayed by the entire screen from the coordinate origin (0, 0) to the coordinates (x max , y max ).
  • FIG. 3 is a side sliding interface diagram after the side slides out of the menu page.
  • the fixed point P 1 (0, 0) is the coordinate origin, and the vertex P 2 coordinate is (x max , y max ).
  • display screen is the display area of sliding interface I, the left side of the interface is the boundary sub menu page l I 1, i.e., the right side of the main page I 2.
  • the sliding touch point can be applied to any position on the side sliding interface I.
  • the terminal acquires the first sliding speed of the generated sliding touch point in real time.
  • the first sliding speed herein includes a first sliding rate and a corresponding first sliding direction, wherein the first sliding rate refers to a sliding rate of the sliding touch point, and the first sliding direction refers to a sliding direction of the sliding touch point.
  • the terminal invokes an API (Application Programming Interface) to obtain a first sliding rate and a first sliding direction of the sliding touch point in real time through the gesture processor.
  • API Application Programming Interface
  • Step S204 calculating a second sliding rate corresponding to the menu page and a third sliding rate corresponding to the main page according to the first sliding rate, and determining a sliding direction corresponding to the menu page and the main page according to the first sliding direction.
  • Step S206 the control menu page and the main page respectively perform corresponding sliding in the sliding direction at the second sliding rate and the third sliding rate.
  • the terminal calculates a second sliding rate corresponding to the menu page and a third sliding rate corresponding to the main page according to the first sliding rate.
  • the second sliding rate and the third sliding rate respectively have a ratio relationship with the first sliding rate.
  • the second sliding rate may be obtained according to a product of the first sliding rate and the first preset constant
  • the third sliding rate is obtained according to a product of the first sliding rate and the second preset constant. It should be noted that both the first preset constant and the second preset constant are positive numbers.
  • the first preset constant may be smaller than the second preset constant.
  • the first predetermined constant is a positive number less than one and the second predetermined constant is one.
  • the second sliding rate of the menu page is made smaller than the third sliding rate of the main page by the preset first preset constant being smaller than the second preset constant, and the display control between the main page and the menu page is provided during the side sliding process. Gradient and cohesiveness make the sliding of the entire sliding interface more smooth.
  • the first preset constant can also be equal to the second preset constant.
  • the terminal determines the side sliding direction corresponding to the menu page and the main page according to the first sliding direction.
  • the side sliding direction refers to a direction in which the direction displayed by the current display interface is aligned with the left and right sides of the horizontal direction of the current display interface with the user viewing the viewing angle as a reference.
  • the descriptions of the horizontal direction, the horizontal direction, the left, the right, the upward, the downward, and the like are all established in the direction and the user presented by the current display interface.
  • the viewing angle is consistent, and the description is made on the premise that the user views the viewing angle.
  • the horizontal sub-direction corresponding to the first sliding direction may be used as a side sliding direction corresponding to the menu page and the main page.
  • the horizontal sub-direction corresponding to the first sliding direction is leftward, it is determined that the side sliding direction corresponding to the menu page and the main page is horizontal to the left, and when the horizontal sub-direction corresponding to the first sliding direction is the rightward direction, Then, it is determined that the side sliding direction corresponding to the menu page and the main page is horizontal to the right. It can be understood that when there is no horizontal sub-direction in the first sliding direction, the side-slip direction is not generated, and the main page and the menu page are not correspondingly slid.
  • control menu page and the main page are respectively pressed at the second sliding rate and the third sliding rate Perform corresponding sliding in the side sliding direction. That is, the control menu page slides in the corresponding sliding direction at the second sliding rate, and controls the main page to slide in the corresponding sliding direction at the third sliding rate.
  • FIG. 4 is a side sliding interface for performing a side sliding operation in one embodiment. If the user slides the touch point P on the side sliding interface and slides in the D 1 direction at the first sliding rate V 1 , the horizontal direction of the D 1 direction is determined to be H 1 , and the menu page is calculated according to V 1 . the second and third slip rate V 2 of the slip rate V 3 main page, the page control menu at a rate V 2 in accordance with the horizontal direction of the slide points H 1, Dashboard slide surface at a rate V 3 according to the direction of the horizontal component H 1.
  • the sliding touch point can be applied to any position on the side sliding interface, the controllable area of the side sliding interface is enlarged, and the controllability of the side sliding interface is enhanced.
  • the first sliding speed of the sliding touch point is obtained in real time
  • the second sliding rate of the menu page and the third sliding rate of the main page are calculated according to the first sliding rate in the first sliding
  • the menu page is determined according to the first sliding direction.
  • the side sliding direction corresponding to the main page surface, the control menu page and the main page respectively slide in the side sliding direction at the second sliding rate and the third sliding rate.
  • the method before step S204, further includes: acquiring a horizontal sub-direction corresponding to the first sliding direction, determining whether the first sliding direction is within a preset range compared to the horizontal sub-direction, and if yes, proceeding to the step S204. If no, the side sliding operation generated by sliding the touch point is not performed.
  • the preset range By setting the preset range, it is possible to effectively reduce unnecessary side-slip operations caused by misjudgment and save processing resources.
  • the main page includes an animation.
  • the method further includes: calculating a motion parameter of the animation according to the first sliding speed, and performing an animation step according to the motion parameter.
  • the main page contains animations, which may contain one or more animations.
  • the terminal calculates the motion parameter of the animation included in the main page according to the first sliding speed, and executes the animation according to the calculated motion parameter.
  • the motion parameters include the speed of motion. Further, the speed of motion includes the rate of motion and the direction of motion.
  • the motion parameter of the animation in the main page is calculated according to the first sliding speed of the sliding touch point, so that the animation execution of the main page is controlled by the first sliding speed of the sliding touch point during the sliding process.
  • the display enhances the controllability and fluency of the animation display in the sliding interface.
  • the animation in the main page includes a first animation
  • the first animation includes a turntable
  • the step of calculating the motion parameter of the animation according to the first sliding speed includes: acquiring the first calculation parameter And calculating a rotation speed and a rotation direction of the turntable according to the first calculation parameter and the first sliding speed.
  • the animation in the main page includes a first animation
  • the first animation includes a carousel
  • the turntable can be a 3D turntable or a 2D turntable.
  • the terminal acquires a preset first calculation parameter, and calculates a rotation rate and a rotation direction of the turntable according to the first calculation parameter and the first sliding speed. That is, the rotation speed of the turntable is calculated according to the first slip rate in the first sliding speed and the first calculation parameter, and the rotation direction of the turntable is determined according to the first sliding direction in the first sliding speed.
  • the rotation direction of the turntable corresponding to the first sliding direction of the sliding touch point is determined according to the correspondence between the horizontal split direction corresponding to the preset first sliding direction and the rotating direction of the turntable. For example, when the horizontal direction of the first sliding direction is to the left, the rotation direction of the turntable is clockwise, and when the horizontal direction of the first sliding direction is to the right, the rotation direction of the turntable is counterclockwise. It can be understood that here, when the horizontal direction of the first sliding direction is to the left, the rotation direction of the turntable is counterclockwise.
  • the specific relationship between the horizontal direction of the first sliding direction and the rotating direction of the rotating wheel is not limited, as long as the horizontal dividing direction of the first sliding direction and the rotating direction of the rotating wheel are compatible. .
  • FIG. 5 is a side sliding interface when performing a side sliding operation in one embodiment.
  • the user slides the touch point on the side sliding interface to slide in the D 2 direction at the first sliding rate V 1 , and determines that the horizontal direction of the D 2 direction is H 2 , and the horizontal direction is according to the first sliding direction.
  • Corresponding relationship between the rotational directions of the turntable T determines that the rotational direction of the turntable T corresponding to H 2 is counterclockwise E 2 .
  • the rotation speed and the rotation direction of the turntable in the first animation are calculated according to the first sliding speed of the sliding touch point and the first calculation parameter, thereby realizing the sliding touch point in the side sliding process.
  • a sliding speed controls the rotation of the turntable in the first animation of the main page, which enhances the controllability and fluency of the turntable rotation in the first animation of the sliding interface.
  • the step of calculating the first calculation parameter before the step of acquiring the first calculation parameter, further includes: acquiring a circumference of the turntable, and obtaining a maximum width value of the preset menu page, according to the circumference of the turntable The ratio of the maximum width value of the menu page is calculated to calculate the first calculation parameter.
  • the terminal may directly acquire the pre-stored turntable circumference, or the terminal may acquire the radius of the turntable, and calculate the circumference of the turntable according to the radius of the turntable. Further, the terminal acquires a maximum width value of the preset menu page (hereinafter referred to as a maximum width value), and calculates a first calculation parameter according to a ratio of a circumference of the dial and a maximum width value.
  • a maximum width value a maximum width value of the preset menu page
  • the maximum width value of the preset menu page refers to the maximum width that can be displayed by the preset menu page. For example, when the currently displayed width value of the menu page is less than the maximum width value, a left-slide or right-slip side-sliding operation may be performed. When the currently displayed width value of the menu page is equal to the maximum width value, the terminal can only perform the side sliding operation when the side sliding operation is performed to the left. If the side sliding operation is continued to the right, the terminal does not perform the execution. The right sliding slide operation.
  • M_PI is a pi
  • R is a radius of the turntable.
  • W is the maximum width value of the menu page.
  • the first calculation parameter may be obtained by using the circumference of the turntable and the maximum width value in other predetermined ratios.
  • the first calculation parameter is based on the circumference of the turntable and the preset.
  • the ratio of the width values can be calculated.
  • the animation in the main page includes a second animation
  • the second animation includes a first button
  • the step of calculating the motion parameter of the animation according to the first sliding speed (referred to as an animation motion parameter calculation)
  • the method includes: acquiring a second calculation parameter, and calculating a movement rate of the first button and a corresponding movement direction according to the second calculation parameter and the first sliding speed.
  • the animation in the main page includes a second animation
  • the second animation includes at least one first button.
  • the at least one first button may be an icon button or a text button, or may be a combination of graphics and text. It can be understood that when the first button is multiple, the types of the first buttons may be the same. The specific form of the button is not limited in the embodiment of the present invention. Further, at least one of the first buttons may be arranged and displayed in the main page according to a preset rule.
  • the terminal acquires a preset second calculation parameter, and calculates a movement rate of the at least one first button and a corresponding movement direction according to the second calculation parameter and the first sliding speed. That is, the moving rate of the at least one first button is calculated according to the first sliding rate in the first sliding speed and the second calculating parameter, and the moving direction of the at least one first button is determined according to the first sliding direction in the first sliding speed.
  • the moving direction of the first button corresponding to the first sliding direction of the sliding touch point is determined according to the correspondence between the horizontal dividing direction corresponding to the preset first sliding direction and the moving direction of the first button. For example, when the horizontal direction of the first sliding direction is to the left, the first button moves downward based on the current display interface, and when the horizontal direction of the first sliding direction is directed to the right, the first button moves upward based on the current display interface. . It can be understood that here, when the horizontal direction of the first sliding direction is to the left, the first button moves upward based on the current display interface.
  • the specific correspondence between the horizontal direction of the first sliding direction and the moving direction of the first button is not limited, as long as the horizontal direction of the first sliding direction and the moving direction of the first button are satisfied. Correspondence can be.
  • FIG. 6 is a side sliding interface for performing a side sliding operation in one embodiment.
  • the user slides the touch point on the side sliding interface to slide in the D 2 direction at the first sliding rate V 1 , and determines that the horizontal direction of the D 2 direction is H 2 , and the horizontal direction is according to the first sliding direction.
  • Corresponding relationship between the first button directions determines that the moving directions of the first buttons B 11 , B 12 and B 13 corresponding to H 2 are downward F 2 .
  • the first sliding speed of the sliding touch point and the second calculation parameter are calculated.
  • the movement rate and the moving direction of the first button in the second animation thereby realizing the movement of the first button in the second animation of the main page by the first sliding speed of the sliding touch point during the side sliding process, enhancing the side
  • the controllability and fluency of the first button movement in the second animation of the sliding interface are calculated.
  • the step of calculating the second calculation parameter before the step of acquiring the second calculation parameter, further includes: acquiring a preset movement interval value corresponding to the at least one first button, and determining according to the preset movement interval value. The difference value is obtained, the maximum width value of the preset menu page is obtained, and the second calculation parameter is calculated according to the ratio of the movement difference value and the maximum width value of the preset menu page.
  • the terminal acquires a preset movement interval value of the at least one first button in the moving direction.
  • the first button moves in the Y direction, that is, the vertical direction
  • the preset moving interval value is y 1 to y 2
  • y 2 is the maximum moving value
  • y 1 is the minimum moving value.
  • the movement difference value is determined according to the preset movement interval value, wherein the movement difference value is a difference between the maximum movement value and the minimum movement value in the movement interval value, and in combination with the above example, the movement difference value is y 2 -y 1 .
  • the maximum width value of the preset menu page is obtained, and the second calculation parameter is calculated according to the ratio of the movement difference value and the maximum width value of the preset menu page (hereinafter referred to as the maximum width value).
  • the first button is controlled to complete the movement of one cycle.
  • the correlation and integrity of the side sliding operation and the second animation are enhanced, and the controllability and fluency of the first button movement in the second animation of the side sliding interface is further enhanced.
  • the second calculation parameter may be obtained by using the difference between the movement difference value and the maximum width value in other preset ratios.
  • the embodiment of the present invention does not limit this, as long as the second calculation parameter is based on the movement difference value and the maximum width value.
  • the ratio can be calculated.
  • the main page may include the first animation and the second animation at the same time, or may include only the first animation, or may only include the second animation.
  • the dial includes a second button
  • the method further includes a second button resizing step, including the following steps:
  • step S702 the angle corresponding to the second button is obtained in real time, and the angle corresponding to the second button is centered on the center point of the turntable, and is rotated by the straight line in the horizontal direction of the center point of the turntable to reach the center point of the second button. The angle passed.
  • the turntable includes at least one second button.
  • the position of the second button changes correspondingly as the turntable rotates.
  • the at least one second button may be an icon button or a text button, or may be a button combined with graphics and the like. It can be understood that when the number of the second buttons is multiple, the types of the second buttons may be the same or different.
  • the specific form of the second button is not limited in the embodiment of the present invention.
  • the at least one second button is distributed on the ring of the turntable according to a preset rule. It may be an average distribution or a non-uniform distribution, which is not limited by the embodiment of the present invention.
  • the terminal acquires an angle corresponding to the at least one second button in real time.
  • the angle corresponding to the second button is centered on the center point of the turntable, and is referenced to the current display interface that is consistent with the viewing angle of the user, and is rotated by the straight line passing through the horizontal direction of the center point of the turntable, and the rotation is second.
  • the angle through which the center point of the button passes is second.
  • FIG. 8 is a current display side sliding interface that is consistent with the viewing angle of the user, wherein the center point of the turntable is a center of the circle, and is rotated by a straight line l 1 in the horizontal direction of the center point of the turntable.
  • the angle elapsed is ⁇ , indicating that the angle corresponding to the second button B 21 is ⁇ , and when rotated to the center point of the second button B 22 , the elapsed When the angle is ⁇ , the angle corresponding to the second button B 22 is ⁇ .
  • Step S704 adjusting the size of the second button according to the angle corresponding to the second button and the preset maximum expansion and contraction value.
  • the terminal presets a maximum expansion value, where the maximum expansion value is equal to the difference between the maximum value and the minimum value of the size indication parameter of the second button, and the size representation parameter of the second button is used to represent the size of the second button.
  • the size characterization parameter of the second button may be the second
  • the side length of the button can also be the radius or diameter of the second button, the diagonal line, etc., which can characterize and adjust the size of the second button.
  • the boundary shape of the second button may be a regular graphic, such as a circle, an ellipse, a regular polygon, etc.
  • the size of the corresponding second button may be a radius, a diameter, a side length, or the like. parameter.
  • the boundary shape of the second button may also be a variety of irregular patterns.
  • the size of the corresponding second button may also be any number of side lengths, diagonal lines, and the like.
  • the specific boundary shape of the second button is not limited, and the type of the size parameter of the second button is also not limited, as long as the size parameter is satisfied and the second button size can be characterized and adjusted.
  • the size of the second button is adjusted according to an angle corresponding to the second button and a preset maximum telescopic value.
  • the size of the at least one second button may be adjusted according to the angle corresponding to the second button, the preset maximum expansion and contraction value, and the minimum value of the second button.
  • the boundary shape of the second button is a circle
  • the size of the second button characterizes the parameter as a radius or a diameter.
  • the size of the second button may be adjusted according to the angle corresponding to the second button, the preset maximum telescopic value, and the minimum radius of the second button, wherein the adjusted second button
  • the value, r max is the maximum radius value of the second button, and r min is the minimum radius value of the second button.
  • the size of the second button is adjusted according to the adjusted radius of the second button.
  • the step of adjusting the size of the second button according to the angle corresponding to the second button and the preset maximum telescopic value comprises: obtaining a size characterization parameter value of the second button before the side sliding operation, according to the front sliding operation
  • the size of the two buttons represents the parameter value, the angle corresponding to the second button, and the preset A large scaling value to adjust the size of the second button.
  • the second button is adjusted according to the angle corresponding to the second button, and the second button is indirectly corresponding to the first point of the sliding touch point.
  • the sliding rate is determined by the rotational position of the second button. Therefore, the adjustment of the second button size is controlled according to the first sliding rate of the sliding touch point, and the controllability of the sliding interface is enhanced. At the same time, the smoothness of the content display of the sliding interface is improved.
  • the method further includes the step of completing the maximum sliding distance, including the following steps:
  • Step S902 when receiving the slide stop instruction, calculate the slipped distance corresponding to the main page from the start of the slide to the reception of the slide stop command.
  • the terminal when the user stops the side sliding operation on the sliding touch point, the user generates a sliding stop command, and the terminal calculates the sliding distance corresponding to the main page from the start sliding to the receiving the sliding stop command according to the sliding stop instruction.
  • the terminal may invoke an API, and calculate, by the gesture processor, a sliding distance corresponding to the sliding touch point, and a third sliding rate corresponding to the main page according to the first sliding rate corresponding to the sliding touch point. The ratio between the values is calculated to calculate the sliding distance corresponding to the main page.
  • the terminal may acquire a position of the main page in the current display interface when receiving the slide stop instruction, and compare the current position with the position at the start of the sliding to obtain a correspondence of the main page. The sliding distance.
  • step S904 when the sliding distance is greater than or equal to the preset critical distance, the remaining time required for the main page to complete the preset maximum sliding distance is obtained.
  • the preset critical distance is obtained, and the calculated sliding distance is compared with the preset critical distance.
  • the main page is required to complete the preset maximum sliding distance.
  • the remaining time (hereinafter referred to as the remaining time). It can be understood that the preset maximum sliding distance is actually the maximum width value of the menu page (hereinafter referred to as the maximum width value), that is, the maximum width value that can be displayed by the preset menu page.
  • calculating a difference between the maximum width value and the slipped distance that is, the remaining distance of the sliding required for the preset maximum sliding distance of the main page (hereinafter referred to as the remaining distance), according to the remaining distance and the maximum
  • the ratio of the width values calculates the remaining time required. It can be understood that the remaining distance can be obtained in a ratio of 1 to 1 with the preset value of the menu page to obtain the required remaining time. May be acquired adjustment parameter preset time t c, t c adjustment parameter according to a preset time, the ratio of the maximum width of the remaining distance and the calculated desired value of the remainder.
  • t t c *(W-W_s)/W, where t is the required remaining time, W_s is the slipped distance, W is the maximum width value, and W-W_s is the remaining distance, t c Adjust the parameters for time.
  • the required remaining time is preset in the terminal, and when the sliding distance is greater than or equal to the preset critical distance, the preset remaining time is acquired. Further, the corresponding relationship between the sliding distance and the required remaining time is preset in the terminal, that is, different sliding distances are set to different required remaining time, and according to the corresponding relationship, the preset corresponding to the sliding distance is obtained. The rest of the time required.
  • Step S906 determining a first initial rate of the main page according to the third sliding rate or the first preset rate, and calculating a first time corresponding to the main page according to the remaining time required by the main page to complete the preset maximum sliding distance and the first initial rate. Acceleration.
  • the terminal acquires the first initial rate of the main page.
  • the third sliding rate may be used as the first initial rate, or the first preset rate may be acquired, and the first preset rate is used as the first initial rate.
  • the third sliding rate may be used as the first initial rate, or the first preset rate may be acquired, and the first preset rate is taken as the first Initial rate.
  • the sliding stop command is received, when the third sliding rate is zero, the first preset rate is acquired, and the first preset rate is used as the first initial rate.
  • the correspondence between the sliding distance and the first preset rate is preset in the terminal.
  • the first preset rate is to be the first initial rate, the corresponding relationship may be acquired according to the corresponding relationship.
  • the first preset rate is taken as the first initial rate.
  • the terminal calculates the first page corresponding to the main page according to the required remaining time and the first initial rate. Acceleration. Specifically, the terminal determines the first path, and calculates a first acceleration corresponding to the main page according to the first path, the required remaining time, and the first initial rate. It should be noted that, when the terminal receives the sliding stop command, the remaining distance of the sliding required for the main page to complete the preset maximum sliding distance is used as the first distance, and the preset acceleration calculation path may also be acquired as the first distance. This embodiment of the present invention does not limit this.
  • the preset acceleration calculation path is greater than or equal to the difference between the preset maximum width value of the menu page and the preset critical distance.
  • a first acceleration starting the first initial rate V 1
  • S 1 is the first distance
  • the time required for the remainder of t the beginning of 1 t + 0.5 * a 1
  • the first acceleration may be calculated according to the first initial rate and the remaining distance and the time required to complete the remaining distance.
  • the speed of the main page is also just Reduced to 0.
  • the transition of the main page slide is enhanced, and the main page slide transition is more natural, avoiding the burden of jumping or quickly sliding the display interface.
  • Step S908 controlling the main page to decelerate and slide in the side sliding direction at the first initial rate and the first acceleration to complete the preset maximum sliding distance.
  • the terminal controls the main page to decelerate and slide in the sliding direction according to the first initial rate and the first acceleration to complete the preset maximum sliding distance, that is, control the main page to decelerate and slide in the sliding direction at the first initial rate and the first acceleration. Until the remaining distance is swiped, the main page completes the sliding of the preset maximum sliding distance.
  • the interface state is the interface that is displayed when the main page needs to complete the maximum sliding distance.
  • the current display interface of the sliding interface is the entire main page, and the menu page is not displayed yet, and the user slides to exceed the preset critical distance, indicating that the user wants to use the menu page.
  • the face is displayed.
  • the main page is controlled to complete the maximum sliding distance to display the menu page with the maximum width value.
  • the user does not need to slide to the edge of the screen to display the menu page with the maximum width value, which saves the user's operating cost, and correspondingly saves the sliding detection resource cost of monitoring the user's excess side-slip operation.
  • step S902 to step S908 can be replaced by the menu page, so as to implement the sliding stop command when the sliding distance is greater than or equal to the preset critical distance, control.
  • the control main page when the sliding distance is less than the preset critical distance, then the control main page is returned to the position before the sliding operation.
  • the preset return time and the return initial rate of the main page may be acquired, and the return acceleration of the main page is calculated according to the preset return time and the return initial rate and the sliding distance of the main page, and the main page is controlled to return to the initial rate and The return acceleration is decelerated to the position before the sliding operation in the corresponding reverse direction of the side slip direction.
  • the sliding operation command when the sliding operation command is received and the sliding has been less than the preset critical distance, it may largely reflect that the user does not want to perform a side sliding operation, such as a user's misoperation. At this point, the control main page returns to the original position before the side-slip operation. The waste of resources caused by misoperation is avoided.
  • the return slip of the main page is decelerated, so that the return slip transition of the main page is more natural, avoiding the burden of jumping or quickly sliding the display interface.
  • the main page in this embodiment may be replaced by a menu page to implement control of the menu page when the sliding stop command is received and the sliding distance is less than the preset critical distance.
  • the animation in the main page is controlled to return to the display state before the sliding operation according to the preset return time.
  • the remaining time required to complete the preset maximum sliding distance on the main page is obtained.
  • the step further includes: determining a second initial rate of the animation according to the motion rate or the second preset rate in the motion parameter of the animation, and calculating the animation according to the remaining time required by the main page to complete the preset maximum sliding distance and the second initial rate.
  • the second acceleration, the step of decelerating the remaining animation in one cycle according to the second acceleration and the second initial rate is obtained.
  • the motion parameter of the animation includes the motion rate of the animation.
  • the terminal may obtain the second initial rate of the animation according to the animation, and specifically, the motion rate of the animation may be used as the second initial For the rate, the second preset rate may also be obtained, and the second preset rate is used as the second initial rate.
  • the motion rate of the animation may be used as the second initial rate, or the second preset rate may be acquired, and the second preset rate is used as the second Initial rate.
  • the terminal sets a correspondence between the animation path parameter that has been executed in one cycle and the second preset rate.
  • the terminal acquires one according to the corresponding relationship.
  • the second preset rate corresponding to the animation path parameter that has been executed in the cycle is taken as the second initial rate.
  • the second acceleration of the animation is calculated based on the required remaining time and the second initial rate.
  • the terminal determines a second distance, and calculates a second acceleration corresponding to the animation according to the second path, the required remaining time, and the second initial rate.
  • the second distance may refer to the remaining distance of the animation in one cycle when the sliding stop command is received, that is, the second distance may be obtained according to the difference between the total distance of the animation in one cycle and the animation route executed in one cycle. It can be understood that the second distance can be a straight line or a curved path.
  • the second distance may also be a preset arbitrary distance
  • the second acceleration is calculated according to the preset arbitrary distance
  • the control animation is gradually reduced according to the second acceleration at the second initial rate. The animation is executed until the second initial rate is reduced to zero.
  • the remaining time required to complete the preset maximum sliding distance of the main page is controlled according to the same time as controlling the movement of the main page, and the correlation between the execution of the animation and the sliding of the main page is enhanced. Improves the integrity and integrity of the animation and the main page.
  • the animation includes a first animation
  • the second initial rate is the initial rate of the carousel, ie, the initial rate of the carousel is determined based on the rate of rotation of the carousel or the second predetermined rate.
  • the second acceleration of the animation is calculated according to the remaining time required by the main page to complete the preset maximum sliding distance and the second initial rate, and the remaining animation in one cycle is performed according to the second acceleration and the second initial rate.
  • the animation includes a first animation.
  • the terminal acquires an arc length from which the turntable has been rotated from the start of the turntable to the receiving of the slide stop command, and calculates a period according to the rotated arc length. The remaining arc length of the turntable. Further, the acceleration of the turntable is calculated according to the remaining rotation arc length of the turntable, the initial speed of the turntable, and the remaining time required in one cycle.
  • V C starts as the initial speed of the turntable
  • t is the remaining time required
  • R is the turntable Radius
  • L is the length of the rotated arc.
  • V C may be the rotation rate of the turntable or the second preset speed.
  • the rotation rate of the turntable may be used as the initial speed of the turntable, or the second preset rate may be acquired, and the second preset rate is used as the initial speed of the turntable.
  • the sliding stop command is received, when the rotation rate of the turntable is zero, the second preset rate is acquired, and the second preset rate is used as the initial speed of the turntable.
  • a correspondence between the rotated arc length and the second preset rate is preset in the terminal, and when the second preset rate is to be the initial rate of the turntable, the corresponding relationship may be acquired according to the corresponding relationship.
  • the second preset rate is used as the initial rate of the turntable.
  • a reference point on the turntable can be selected when starting to rotate, and the The position of the reference point is compared with the position of the reference point when the sliding stop command is received, the central angle of the rotation of the turntable is calculated, and the arc length of the turntable has been calculated according to the central angle. It is also possible to calculate the arc length that has been rotated based on the product of the rotated arc and the turntable radius.
  • the remaining time required to complete the preset maximum sliding distance of the main page is controlled, and the remaining rotation in one cycle of the turntable is controlled according to the same time as controlling the movement of the main page, thereby enhancing the execution of the animation and the main page.
  • the relevance of the slide improves the integrity and integrity of the animation and the main page.
  • the size of the second button in the dial can also be adjusted according to the real-time rotation of the dial, and the specific adjustment manner is the same as described in the foregoing embodiment.
  • the adjustment manner of the corresponding second button is the same when the rotary control point is rotated by the sliding touch point.
  • the angle corresponding to the second button is obtained in real time, and the angle corresponding to the second button is centered on the center point of the turntable, according to the second
  • the angle corresponding to the button and the preset maximum telescopic value adjust the size of the second button. This embodiment will not be described in detail.
  • the method further includes:
  • Obtaining a current second button in the carousel acquiring a first button corresponding to at least one of the current second button according to a correspondence between the second button and the at least one first button, and displaying the corresponding at least one first button .
  • the current second button in the turntable is acquired.
  • the current second button refers to the second button in the currently selected state, and further, the current second button size characterization parameter value is the maximum value M max .
  • a correspondence between the second button and the at least one first button is preset in the terminal, and according to the correspondence, the first button corresponding to at least one of the current second buttons is acquired, and the corresponding at least one of the first buttons is Button to display. Further, the correspondence between the first button and the second button is used to represent that the first button is a sub-item button corresponding to the second button, that is, the first button is a refinement of the content represented by the second button. .
  • FIG. 10 is a display interface of a main page in a side-slip interface in one embodiment.
  • the current second button is “hot selection”
  • the first button corresponding to the current second button is B 11 “health check”, B 12 “home paying” and B 13 “property payment”.
  • the corresponding first buttons B 11 , B 12 and B 13 are then displayed. It can be understood that B 11 “health check”, B 12 “on-site claims” and B 13 “property payment” are the refined expression of “hot selection” content.
  • the first animation and the second animation are associated by the first button and the second button, which is equivalent to forming a large animation according to the first animation and the second animation, and is added in a limited display space.
  • the diversity of display content improves the display utilization of the screen.
  • the step of displaying the corresponding at least one first button comprises:
  • the third initial rate of the first button is determined according to the moving rate of the first button or the third preset rate, and the first button is controlled to simulate the elastic motion at the third initial rate to stop the final stop region preset in the direction of the elastic motion.
  • the terminal determines a third initial rate of the first button.
  • the moving rate of the first button or the third preset rate is used as the third initial rate of the first button.
  • the method of the foregoing description may be used to determine when the third preset rate or the moving rate of the first button is used as the third initial rate, which is not described in this step.
  • the terminal stops the final stop area in the direction of the elastic motion.
  • the final stop area can be a position interval.
  • the terminal controls the first button to simulate the elastic motion at the third initial rate, and controls the first button to simulate the elastic motion and then stops the final stop region preset in the direction of the elastic motion.
  • the simulated elastic motion controls the first button to be displayed in the form of an elastic motion. That is, the first button is controlled to move between at least one of the direction reversal positions.
  • the direction reversal position means that when the position is reached, the moving direction of the first button is reversed. For example, when the first button moves from the previous direction reversal position Y 1 to the next direction reversal position Y 2 , the movement direction is vertically downward, and when the direction reversal position Y 2 is reached, the movement direction is reversed.
  • the first button moves from the direction reversal position Y 2 to the downward direction reversal position Y 3 in a vertically upward direction, and so on, and finally controls the first button to stop in the direction of the elastic motion.
  • the default final stop area When it is turned upright, the first button moves from the direction reversal position Y 2 to the downward direction reversal position Y 3 in a vertically upward direction, and so on, and finally controls the first button to stop in the direction of the elastic motion.
  • the default final stop area is the default final stop area.
  • the movement rate is decremented by acquiring the preset preset distance and acceleration of the previous direction reversal position to the next direction reversal position, so as to realize the simulated elastic motion.
  • the transition can be smoother and more in line with natural mechanics, reducing the burden on the display compared to direct or sudden display.
  • the first button corresponding to the current second button can be directly rendered by the gradual change in the final stop region. It is also possible to control the first button to move to a preset final stop area in accordance with a path of a preset linear motion or a curved motion. This embodiment of the present invention does not limit this.
  • a display control device for a side sliding interface comprising:
  • the speed monitoring module 1102 is configured to acquire a first sliding speed of the sliding touch point in real time, and the sliding touch point acts on any position on the side sliding interface, where the first sliding speed includes a first sliding rate and a first sliding direction.
  • the calculation module 1104 is configured to calculate a second sliding rate corresponding to the menu page according to the first sliding rate and a third sliding rate corresponding to the main page, and determine a sliding direction corresponding to the menu page and the main page according to the first sliding direction.
  • the sliding control module 1106 is configured to control the menu page and the main page to perform corresponding sliding in the sliding direction at the second sliding rate and the third sliding rate, respectively.
  • the main page includes an animation; the calculation module 1104 is further configured to calculate a motion parameter of the animation according to the first sliding speed.
  • the apparatus also includes an animation execution module for performing animation based on the motion parameters.
  • the animation includes a first animation and/or a second animation, the first animation comprising a carousel and the second animation comprising a first button.
  • the calculation module 1104 is further configured to acquire a first calculation parameter, calculate a rotation rate and a rotation direction of the turntable according to the first calculation parameter and the first sliding speed; and/or obtain a second calculation parameter, according to the second calculation parameter.
  • the first sliding speed calculates a moving speed of the first button and a corresponding moving direction.
  • the calculation module 1104 is further configured to obtain a circumference of the turntable, and obtain a preset dish.
  • the maximum width value of a single page, and the first calculation parameter is calculated according to the ratio of the circumference of the turntable to the maximum width value of the menu page.
  • the calculation module 1104 is further configured to acquire a preset movement interval value corresponding to the at least one first button, determine a movement difference value according to the preset movement interval value, and obtain a maximum width value of the preset menu page, according to The ratio of the difference value of the movement to the maximum width value of the menu page calculates the second calculation parameter.
  • the turntable includes a second button; the device further includes:
  • the corresponding angle determining module is configured to acquire the angle corresponding to the second button in real time, and the angle corresponding to the second button is centered on the center point of the turntable, and the second button is rotated by the straight line in the horizontal direction of the center point of the turntable. The angle through which the center point passes.
  • the adjustment module is configured to adjust the size of the second button according to the angle corresponding to the second button and the preset maximum expansion value.
  • the calculation module 1104 is further configured to calculate a sliding distance corresponding to the main page when the sliding stop instruction is received, when the sliding stop instruction is received.
  • the device further includes:
  • the obtaining module is configured to acquire a remaining time required for the main page to complete the preset maximum sliding distance when the sliding distance is greater than or equal to the preset critical distance.
  • the calculation module 1104 is further configured to determine a first initial rate of the main page according to the third sliding rate or the first preset rate, and calculate a main page corresponding to the remaining time required to complete the preset maximum sliding distance according to the main page and the first initial rate.
  • the first acceleration is further configured to determine a first initial rate of the main page according to the third sliding rate or the first preset rate, and calculate a main page corresponding to the remaining time required to complete the preset maximum sliding distance according to the main page and the first initial rate. The first acceleration.
  • the sliding control module 1106 is further configured to control the main page to decelerate and slide in a side sliding direction at a first initial rate and a first acceleration to complete a preset maximum sliding distance.
  • the acquisition module is further configured to determine a second initial rate of the animation based on a rate of motion in the motion parameter of the animation or a second predetermined rate.
  • the calculation module 1104 is further configured to calculate a second acceleration of the animation according to a remaining time required by the main page to complete the preset maximum sliding distance and a second initial rate.
  • the animation execution module is further configured to perform one cycle according to the second acceleration and the second initial rate deceleration The remaining animation inside.
  • the various modules in the display control device of the above-described side-slip interface may be implemented in whole or in part by software, hardware, and combinations thereof.
  • the above modules may be embedded in the hardware of the base station or may be stored in the memory of the base station in a software form, so that the processor can call the corresponding operations of the above modules.
  • the processor can be a central processing unit (CPU), a microprocessor, a microcontroller, or the like.
  • the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

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

侧滑界面的显示控制方法和装置、终端和存储介质
本申请要求于2016年05月06日提交中国专利局,申请号为2016102971061,发明名称为“侧滑界面的显示控制方法和装置”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域,特别是涉及一种侧滑界面的显示控制方法和装置、终端和存储介质。
背景技术
随着科学技术的发展,移动终端的界面能够展示和处理的内容越来越多,因此对屏幕利用率的要求也越来越高,在这种时代背景下,侧滑菜单应运而生,用户可以将菜单导航(可以理解,菜单导航指包含个人资料、设置等菜单选项的导航)设置于一个菜单页面,通过侧滑主页面或点击头像等方式将该菜单页面隐藏和显现。
传统方法中,用户在进行侧滑操作时,通常是通过控制主页面的移动,来控制主页面的下层菜单页面是否显示,此外,在控制主页面进行滑动时,通常是根据最后的侧滑操作结束位置来确定如何移动主页面。因而传统方法在侧滑时,侧滑界面可控性非常低。
发明内容
根据本申请公开的各种实施例,提供一种侧滑界面的显示控制方法、终端和存储介质。
一种侧滑界面的显示控制方法,包括:
实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面 上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
一种侧滑界面的显示控制装置,包括:
速度监测模块,用于实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
计算模块,用于根据所述第一滑动速率计算所述菜单页面对应的第二滑动速率和所述主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
滑动控制模块,用于控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
一种终端,包括存储器和处理器,所述存储器中存储有指令,所述指令被所述处理器执行时,使得所述处理器执行以下步骤:
实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
一个或多个存储有计算机可执行指令的非易失性可读存储介质,所述计算机可执行指令被一个或多个处理器执行时,使得所述一个或多个处理器执行以下步骤:
实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。本申请的一个或多个实施例的细节在下面的附图和描述中提出。本申请的其它特征、目的和优点将从说明书、附图以及权利要求书变得明显。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为一个实施例中终端的框图;
图2为一个实施例中侧滑界面的显示控制方法的流程图;
图3为一个实施例中侧滑界面示意图;
图4为一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图5为另一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图6为又一个实施例中为描述侧滑界面的显示控制方法的界面示意图;
图7为一个实施例中第二按钮大小调整方法的流程图;
图8为一个实施例中为描述第二按钮对应的角度的侧滑界面示意图;
图9为一个实施例中最大滑动距离完成方法的流程图;
图10为再一个实施例中为描述侧滑界面的显示控制方法的界面示意图;及
图11为一个实施例中侧滑界面的显示控制装置的框图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步的详细说明。应当理解,此处所描述的具体实施例仅用于解释本发明,并不用于限定本发明。
在一个实施例中,提供了一种终端,该终端上可安装应用程序。该终端可以为手机、平板电脑、笔记本电脑、台式计算机等。如图1所示,该终端包括通过系统总线连接的处理器、内存储器、非易失性存储介质、网络接口、显示屏和输入装置。其中,该处理器用于提供计算和控制能力,支撑整个终端的运行。该终端的非易失性存储介质存储有操作系统和计算机可执行指令,该计算机可执行指令可被处理器执行以实现以下各实施例所提供的一种侧滑界面的显示控制方法。终端中的内存储器为非易失性存储介质中的操作系统和计算机可执行指令的运行提供环境。网络接口用于连接到网络进行通信。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等,在本实施例中,显示屏可作为终端的输出装置,用于显示各种界面,比如菜单页面或主页面。输入装置可以是显示屏上覆盖的触摸层,也可以是电子设备外壳上设置的按键、轨迹球或触控板,也可以是外接的键盘、触控板或鼠标等,用于供用户输入各种操作指令,例如,在本实施例中,可供用户输入滑动操作的相关指令。
本领域技术人员可以理解,图1中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的终端的限定,具体的终端可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
如图2所示,在一个实施例中,提供了一种侧滑界面的显示控制方法,以该方法应用于图1所示的终端为例进行说明,包括以下步骤:
步骤S202,实时获取滑动触控点的第一滑动速度,滑动触控点作用于侧 滑界面上的任意位置,第一滑动速度包含第一滑动速率和第一滑动方向。
本实施例中,用户在终端显示的侧滑界面上进行滑动操作,具体地,用户通过触摸终端侧滑界面上的任意位置,以产生滑动触控点来进行滑动操作。其中,侧滑界面用于表示进行侧滑操作时的终端屏幕上所显示的界面,可以是正在开始接收侧滑操作但尚未将菜单页面显示出来的主页面,也可以是侧滑出菜单页面后,所显示的菜单页面和主页面的整体界面。
进一步,菜单页面指可以通过侧滑操作进行隐藏和显示控制的菜单栏所在页面。主页面,指在用于显示主要业务内容的页面。
进一步对侧滑界面进行解释说明。假设终端屏幕一个顶角为坐标原点(0,0),屏幕上其余任意点坐标为(x,y),这里结合实际情况可以默认x和y的值为正数,屏幕上最大坐标值为(xmax,ymax)。则在进行侧滑操作时,侧滑界面即为由坐标原点(0,0)到坐标(xmax,ymax)这整个屏幕所显示的界面。
如图3所示,图3为侧滑出菜单页面后的侧滑界面图,定点P1(0,0)为坐标原点,顶点P2坐标为(xmax,ymax),则虚线框所示屏幕显示区域即为侧滑界面I,界面中分界线l左边即为菜单页面I1,右边即为主页面I2。滑动触控点可以作用于侧滑界面I上的任意位置。
终端实时获取产生的滑动触控点的第一滑动速度。可以理解,这里的第一滑动速度包含第一滑动速率及对应的第一滑动方向,其中,第一滑动速率指滑动触控点的滑动速率,第一滑动方向指滑动触控点的滑动方向。具体地,终端调用API(Application Programming Interface,应用程序编程接口),通过手势处理器实时获取滑动触控点的第一滑动速率和第一滑动方向。
步骤S204,根据第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向。
步骤S206,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。
具体地,终端根据第一滑动速率计算菜单页面对应的第二滑动速率以及主页面对应的第三滑动速率。
其中,第二滑动速率、第三滑动速率分别和第一滑动速率之间具有比值关系。具体地,可以根据第一滑动速率与第一预设常数的乘积得到第二滑动速率,根据第一滑动速率与第二预设常数的乘积得到第三滑动速率。需要说明的是,第一预设常数和第二预设常数皆为正数。
其中,第一预设常数可以小于第二预设常数。在一个实施例中,第一预设常数为小于1的正数,第二预设常数为1。通过预设第一预设常数小于第二预设常数,使菜单页面的第二滑动速率小于主页面的第三滑动速率,在侧滑过程中,使主页面和菜单页面之间的显示控制具有渐变性、衔接性,使整个侧滑界面的侧滑显示更加的流畅。
可以理解,第一预设常数也可以等于第二预设常数。
此外,终端还会根据第一滑动方向确定菜单页面和主页面所对应的侧滑方向。可以理解,侧滑方向指当前显示界面所呈现的方向在与用户查看视角一致的情况下,以该用户查看视角为参照,于当前显示界面的水平方向的左右两边进行滑动的方向。
需要说明的是,本申请所有实施例中,所提及水平方向、水平分方向、向左、向右、向上、向下等相关方位描述,都是建立在当前显示界面所呈现的方向与用户查看视角一致,以该用户查看视角为参照的前提下所进行的描述。
具体地,可以是,将第一滑动方向对应的水平分方向作为菜单页面和主页面对应的侧滑方向。比如,当第一滑动方向对应的水平分方向为向左时,则确定菜单页面和主页面对应的侧滑方向为水平向左,当第一滑动方向对应的水平分方向为向右时,则确定菜单页面和主页面对应的侧滑方向为水平向右。可以理解,当第一滑动方向不存在水平分方向时,则不产生侧滑方向,主页面和菜单页面则不进行对应的滑动。
进一步,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按 照侧滑方向进行对应滑动。即控制菜单页面以第二滑动速率按照对应的侧滑方向进行滑动,控制主页面以第三滑动速率按照对应的侧滑方向进行滑动。
现结合图4进行解释说明,图4为一个实施例中进行侧滑操作的侧滑界面。假如,用户通过滑动触控点P作用于侧滑界面,以第一滑动速率V1向D1方向进行滑动,则确定D1方向的水平分方向为H1,根据V1计算出菜单页面的第二滑动速率V2和主页面的第三滑动速率V3,控制菜单页面以速率V2按照水平分方向H1滑动,控制主页面以速率V3按照水平分方向H1滑动。
本实施例中,滑动触控点可以作用于侧滑界面上的任意位置,扩大了侧滑界面的可控制区域,增强了侧滑界面的可控性。此外,实时获取滑动触控点的第一滑动速度,根据第一滑动中的第一滑动速率计算菜单页面的第二滑动速率和主页面的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向,控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。即通过滑动触控点的实时滑动速度控制菜单页面和主页面的滑动速率和滑动方向,将滑动触控点的实时滑动与侧滑界面中的菜单页面和主页面的滑动相结合,进一步增强了侧滑界面的可控性,以及提高了侧滑界面内容显示的流畅性。
在一个实施例中,在步骤S204之前,还包括,获取第一滑动方向对应的水平分方向,判断第一滑动方向相较于水平分方向的角度是否在预设范围内,若是,则进入步骤S204,若否,则不执行滑动触控点所产生的侧滑操作。通过设置预设范围,能够有效地减少因误判断造成的不需要的侧滑操作,节省处理资源。
在一个实施例中,主页面中包含动画,在实时获取滑动触控点的第一滑动速度的步骤之后,还包括:根据第一滑动速度计算动画的运动参数,根据运动参数执行动画的步骤。
具体地,主页面中包含动画,其中所包含的动画可以为一个或多个。在实时获取滑动触控点的第一滑动速度之后,终端会根据第一滑动速度计算主页面中所包含的动画的运动参数,根据计算出来的运动参数执行该动画以展 示动画效果。其中,运动参数包含运动速度。进一步,运动速度包含运动速率及运动方向。
本实施例中,根据滑动触控点的第一滑动速度来计算得到主页面中动画的运动参数,从而实现在侧滑过程中,由滑动触控点的第一滑动速度控制主页面的动画执行与展示,增强了侧滑界面中动画显示的可控性及流畅性。
在一个实施例中,主页面中的动画包含第一动画,第一动画包含转盘,根据第一滑动速度计算动画的运动参数的步骤(简称动画运动参数计算步骤),包括:获取第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率及转动方向。
本实施例中,主页面中的动画包含第一动画,第一动画包含转盘。其中,该转盘可以是3D转盘也可以是2D转盘。
进一步,终端会获取预先设置的第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率和转动方向。即根据第一滑动速度中的第一滑动速率和第一计算参数计算转盘的转动速率,根据第一滑动速度中的第一滑动方向确定转盘的转动方向。
具体地,根据预设的第一滑动方向对应的水平分方向与转盘转动方向之间的对应关系,确定滑动触控点的第一滑动方向所对应的转盘的转动方向。比如,当第一滑动方向的水平分方向向左时,则转盘的转动方向为顺时针,当第一滑动方向的水平分方向向右时,则转盘的转动方向为逆时针。可以理解,这里也可以是第一滑动方向的水平分方向向左时,转盘的转动方向为逆时针。本发明实施例,对第一滑动方向的水平分方向与转盘的转动方向之间的具体何种对应关系不作限定,只要满足第一滑动方向的水平分方向与转盘的转动方向有对应关系即可。
如图5所示,图5为一个实施例中进行侧滑操作时的侧滑界面。用户通过滑动触控点作用于侧滑界面,以第一滑动速率V1向D2方向进行滑动,则确定D2方向的水平分方向为H2,则根据第一滑动方向的水平分方向与转盘T的转动方向之间的对应关系,确定H2对应的转盘T的转动方向为逆时针E2
本实施例中,根据滑动触控点的第一滑动速度和第一计算参数来计算得到第一动画中转盘的转动速率和转动方向,从而实现在侧滑过程中,由滑动触控点的第一滑动速度控制主页面的第一动画中转盘的转动,增强了侧滑界面的第一动画中转盘转动的可控性及流畅性。
在一个实施例中,在获取第一计算参数的步骤之前,还包括第一计算参数计算的步骤,包括:获取转盘的周长,获取预设的菜单页面的最大宽度值,根据转盘的周长和菜单页面的最大宽度值的比值计算出第一计算参数。
具体地,可以是终端直接获取预存储的转盘周长,也可以是终端获取转盘的半径,根据转盘的半径计算出转盘的周长。进一步,终端获取预设的菜单页面的最大宽度值(以下简称最大宽度值),根据转盘的周长和最大宽度值的比值计算出第一计算参数。
其中,预设的菜单页面的最大宽度值指预设的菜单页面可显示的最大宽度。比如,当菜单页面的当前显示的宽度值小于最大宽度值时,则可以进行左滑或右滑的侧滑操作。当菜单页面的当前显示的宽度值等于最大宽度值时,则只能向左进行侧滑操作时,终端才会对应执行该侧滑操作,如果继续向右进行侧滑操作,终端也不进行执行该右滑的滑动操作。
进一步,可以是将转盘的周长与最大宽度值以1比1的比例关系得到第一计算参数,第一计算参数K1=2M_PI*R/W,其中,M_PI为圆周率,R为转盘的半径,W为菜单页面的最大宽度值。本实施例中,使在菜单页面和主页面滑动了一个菜单页面的最大宽度值时,控制转盘正好完成一个周期的旋转。增强了侧滑操作与第一动画的关联性、完整性,更加地增强了侧滑界面的第一动画中转盘转动的可控性及流畅性。
也可以是将转盘的周长与最大宽度值以其它预设的比例关系得到第一计算参数,本发明实施例对此不作限定,只要满足,第一计算参数是根据转盘的周长和预设宽度值的比值计算出的即可。
在一个实施例中,主页面中的动画包含第二动画,第二动画包含第一按钮,根据第一滑动速度计算动画的运动参数的步骤(简称动画运动参数计算 步骤),包括:获取第二计算参数,根据第二计算参数和第一滑动速度计算第一按钮的移动速率及对应的移动方向。
本实施例中,主页面中的动画包含第二动画,第二动画包含至少一个的第一按钮。其中,至少一个的第一按钮可以是图标按钮也可以是文字按钮,还可以是图文结合的按钮,可以理解,当第一按钮为多个时,这多个第一按钮的类型可以相同也可以不同,本发明实施例对按钮的具体形式不作限定。进一步,至少一个的第一按钮可以按照预设规则进行排列显示于主页面中。
终端会获取预先设置的第二计算参数,根据第二计算参数和第一滑动速度计算至少一个的第一按钮的移动速率及对应的移动方向。即根据第一滑动速度中的第一滑动速率和第二计算参数计算至少一个的第一按钮的移动速率,根据第一滑动速度中的第一滑动方向确定至少一个的第一按钮的移动方向。
具体地,根据预设的第一滑动方向对应的水平分方向与第一按钮移动方向之间的对应关系,确定滑动触控点的第一滑动方向所对应的第一按钮的移动方向。比如,当第一滑动方向的水平分方向向左时,则第一按钮基于当前显示界面向下移动,当第一滑动方向的水平分方向向右时,则第一按钮基于当前显示界面向上移动。可以理解,这里也可以是第一滑动方向的水平分方向向左时,第一按钮基于当前显示界面向上移动。本发明实施例,对第一滑动方向的水平分方向与第一按钮的移动方向之间的具体何种对应关系不作限定,只要满足第一滑动方向的水平分方向与第一按钮的移动方向有对应关系即可。
如图6所示,图6为一个实施例中进行侧滑操作的侧滑界面。用户通过滑动触控点作用于侧滑界面,以第一滑动速率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为最大宽度值。本实施例中,使在菜单页面和主页面滑动了一个菜单页面的最大宽度值时,控制第一按钮正好完成一个周期的移动。增强了侧滑操作与第二动画的关联性、完整性,更加地增强了侧滑界面的第二动画中第一按钮移动的可控性及流畅性。
也可以是将移动差值与最大宽度值以其它预设的比例关系得到第二计算参数,本发明实施例对此不作限定,只要满足,第二计算参数是根据移动差值和最大宽度值的比值计算出的即可。
可以理解,主页面中可以同时包含第一动画和第二动画,也可以是只包含第一动画,还可以是只包含第二动画。
如图7所示,在一个实施例中,转盘中包含第二按钮,该方法还包括第二按钮大小调整步骤,包括以下步骤:
步骤S702,实时获取第二按钮对应的角度,该第二按钮对应的角度为以转盘中心点为圆心,以经过转盘中心点的水平方向的直线为起始边进行旋转达到第二按钮中心点时所经过的角度。
本实施例中,转盘中包含至少一个的第二按钮。其中第二按钮的位置会随着转盘的转动而对应变化。当有多个第二按钮时,相邻第二按钮中心点的相对位置不会发生变化。进一步,至少一个的第二按钮可以是图标按钮也可以是文字按钮,还可以是图文结合的按钮等。可以理解,当第二按钮为多个时,这多个第二按钮的类型可以相同也可以不同,本发明实施例对第二按钮的具体形式不作限定。进一步,至少一个的第二按钮按照预设规则分布于转盘的圆环上。可以是平均分布,也可以是非平均分布,本发明实施例对此不作限定。
进一步,终端实时获取至少一个的第二按钮对应的角度。其中,第二按钮对应的角度为以转盘中心点为圆心,以与用户查看视角一致的当前显示界面为参照,以经过转盘中心点的水平方向的直线为起始边进行旋转,旋转达到第二按钮的中心点时所经过的角度。比如,如图8所示,图8为与用户查看视角一致的当前显示侧滑界面,其中,转盘中心点为圆心,以经过转盘中心点的水平方向的直线l1为起始边进行旋转,当旋转到经过第二按钮B21的中心点时,所经过的角度为α,则说明第二按钮B21对应的角度为α,当旋转到第二按钮B22的中心点时,所经过的角度为β时,则说明第二按钮B22对应的角度为β。
可以理解,在转盘转动过程中,第二按钮所对应的角度也会随之发生变化。
步骤S704,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。
本实施例中,终端预先设置了最大伸缩值,其中最大伸缩值等于第二按钮的大小表征参数的最大值与最小值的差值,第二按钮的大小表征参数指用于表征第二按钮大小的参数。进一步,第二按钮的大小表征参数可以是第二 按钮的边长,也可以是第二按钮的半径或直径、对角线等可以表征和调节第二按钮大小的度量参数。
需要说明的是,第二按钮的边界形态可以是规则图形,比如圆形、椭圆形、规则多边形等,这种情况下,对应的第二按钮的大小表征参数可以是半径、直径、边长等参数。此外,第二按钮的边界形态还可以是各种不规则图形,这种情况下,对应的第二按钮的大小表征参数也可以是任意若干边长、对角线等参数,本发明实施例对第二按钮的具体的边界形态不作限定,同样对第二按钮的大小表征参数的类型不作限定,只要满足该大小表征参数能够表征和调节第二按钮大小即可。
进一步,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。具体地,在一个实施例中,可以根据第二按钮对应的角度、预设的最大伸缩值以及第二按钮的大小表征参数的最小值来调整至少一个的第二按钮的大小。更进一步,可以根据以下公式计算得到调整后的第二按钮的大小表征参数值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为第二按钮的最小半径值。进一步,根据调整后的第二按钮的半径来调整第二按钮的大小。
在另一个实施例中,根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小的步骤包括:获取侧滑操作前第二按钮的大小表征参数值,根据侧滑操作前第二按钮的大小表征参数值、第二按钮对应的角度以及预设最 大伸缩值来调整第二按钮的大小。
本实施例中,通过实时获取第二按钮对应的角度,根据第二按钮对应的角度来调整第二按钮的大小,其中,第二按钮实时对应的角度是间接地由滑动触控点的第一滑动速率来确定由第二按钮的转动位置确定的,因此,实现了根据滑动触控点的第一滑动速率来控制第二按钮大小的调整,增强了侧滑界面的可控性。同时,提高了侧滑界面内容显示的流畅性。
如图9所示,在一个实施例中,该方法还包括最大滑动距离完成的步骤,包括以下步骤:
步骤S902,当接收到滑动停止指令时,计算从开始滑动到接收滑动停止指令时主页面所对应的已滑动距离。
本实施例中,用户在停止对作用于滑动触控点进行的侧滑操作时,生成滑动停止指令,终端根据滑动停止指令计算从开始滑动到接收滑动停止指令时主页面对应的已滑动距离。具体地,在一个实施例中,终端可以调用API,通过手势处理器计算滑动触控点对应的已滑动距离,根据滑动触控点对应的第一滑动速率与主页面对应的第三滑动速率之间的比值关系,计算出主页面对应的滑动距离。在另一个实施例中,终端可以获取接收滑动停止指令时,主页面于当前显示界面中所处的位置,根据当前所处位置与开始滑动时的所处位置进行比较,得出主页面对应的已滑动距离。
步骤S904,当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间。
进一步,获取预设临界距离,将计算得到的已滑动距离与预设临界距离进行比对,当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间(以下简称所需余下时间)。可以理解,预设的最大滑动距离实际上即为菜单页面的最大宽度值(以下简称最大宽度值),即预设的菜单页面可显示的最大宽度值。
在一个实施例中,计算最大宽度值与已滑动距离的差值,该差值即为主页面完成预设最大滑动距离所需滑动的剩余距离(以下简称剩余距离),根据 该剩余距离与最大宽度值的比值计算出所需余下时间。可以理解,可以将该剩余距离与菜单页面预设宽度值以1比1的比例关系得到所需余下时间。也可以是,获取预设的时间调整参数tc,根据预设时间调整参数tc、剩余距离和最大宽度值的比值计算出所需余下时间。具体地,满足以下公式:t=tc*(W-W_s)/W,其中,t为所需余下时间,W_s为已滑动距离,W为最大宽度值,W-W_s为剩余距离,tc为时间调整参数。通过设置时间调整参数,可以在需要展现不同的滑动效果时,不需要改动菜单页面预设宽度值,只需要改动时间调整参数即可,相较于改变反应界面比例的菜单页面预设宽度值而言,改动时间调整参数更加的快捷、更加地节省操作成本和资源成本。
在另一个实施例中,终端中预先设置了所需余下时间,当已滑动距离大于或等于预设临界距离时,则获取预设的所需余下时间。进一步,终端中预先设置了已滑动距离和所需余下时间之间的对应关系,即不同的已滑动距离设置了不同的所需余下时间,根据该对应关系,获取已滑动距离所对应的预设的所需余下时间。
步骤S906,根据第三滑动速率或第一预设速率确定主页面的第一初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第一初始速率计算主页面对应的第一加速度。
进一步,终端会获取主页面的第一初始速率。具体地,可以将第三滑动速率作为第一初始速率,也可以获取第一预设速率,以第一预设速率作为第一初始速率。更进一步,当接收滑动停止指令时,第三滑动速率不为零时,则可以以第三滑动速率作为第一初始速率,也可以获取第一预设速率,将第一预设速率作为第一初始速率。当接收滑动停止指令时,第三滑动速率为零时,则获取第一预设速率,以第一预设速率作为第一初始速率。再进一步,终端中预先设置了已滑动距离与第一预设速率之间的对应关系,当要将第一预设速率作为第一初始速率时,可以根据该对应关系,获取与已滑动距离对应的第一预设速率作为第一初始速率。
接着,终端会根据所需余下时间和第一初始速率计算主页面对应的第一 加速度。具体地,终端会确定第一路程,根据第一路程、所需余下时间和第一初始速率计算主页面对应的第一加速度。需要说明的是,终端可以将在接收到滑动停止指令时,主页面完成预设的最大滑动距离所需滑动的剩余距离作为第一路程,也可以获取预设的加速度计算路程作为第一路程,本发明实施例对此不作限定。其中,预设的加速度计算路程大于或等于预设的菜单页面的最大宽度值与预设临界距离的差值。
进一步,可以结合以下公式进行第一加速度的计算,第一初始速率为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。增强了主页面滑动的过渡性,使主页面滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
步骤S908,控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离。
进一步,终端会控制主页面根据第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离,即控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动,直至将剩余距离滑动完毕,使主页面完成预设的最大滑动距离的滑动。
本实施例中,当接收到滑动操作指令,已滑动大于或等于预设临界距离时,则很大程度上可以反映用户所需要展示的界面,而在侧滑操作时,这个用户所需要展示的界面状态是需要主页面完成最大滑动距离时所展现的界面。比如,用户侧滑操作时,侧滑界面当前显示界面是整个主页面,菜单页面还未显示,则用户侧滑到超过预设临界距离,则说明用户是希望将菜单页 面显示出来的,此时,则控制主页面完成最大滑动距离,以将菜单页面以最大宽度值显示出来。而不需要用户一直滑动到屏幕最边缘位置,才使菜单页面以最大宽度值显示出来,节省了用户的操作成本,对应的也节省了监测用户多余的侧滑操作的滑动检测资源成本。
此外,通过生成加速度,对主页面的滑动进行减速处理,使主页面的滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
可以理解,在一个实施例中,步骤S902至步骤S908中的主页面可以被菜单页面进行替代,以实现当接收到滑动停止指令,已滑动距离大于或等于预设临界距离时,对菜单页面的控制。
在一个实施例中,当已滑动距离小于预设临界距离时,则控制主页面返回至滑动操作前所处位置。具体地,可以获取预设的返回时间和主页面的返回初始速率,根据预设的返回时间和返回初始速率和主页面的已滑动距离计算主页面的返回加速度,控制主页面以返回初始速率和返回加速度按照侧滑方向的对应反方向减速滑动至滑动操作前所处位置。
本实施例中,当接收到滑动操作指令,已滑动小于预设临界距离时,则很大程度上可以反映用户不想要进行侧滑操作,比如用户误操作。此时,则控制主页面返回至侧滑操作前的原始位置。避免了因执行误操作造成的资源的浪费。
此外,通过生成返回加速度,将主页面的返回滑动进行减速处理,使主页面的返回滑动过渡更自然,避免了过渡的跳跃地或快速地滑动对显示界面造成的负担。
可以理解,在其他实施例中,本实施例中的主页面可以被菜单页面进行替代,以实现当接收到滑动停止指令,已滑动距离小于预设临界距离时,对菜单页面的控制。
进一步,根据预设的返回时间控制主页面中的动画返回至滑动操作前所处显示状态。
在一个实施例中,在获取主页面完成预设的最大滑动距离所需余下时间 的步骤之后还包括:根据动画的运动参数中的运动速率或第二预设速率确定动画的第二初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第二初始速率计算动画的第二加速度,根据第二加速度和第二初始速率减速执行一个周期内的剩余动画的步骤。
本实施例中,动画的运动参数中包含动画的运动速率。
在获取主页面完成预设的最大滑动距离所需余下时间(以下简称,所需余下时间)之后,终端根据会获取动画的第二初始速率,具体地,可以将动画的运动速率作为第二初始速率,也可以获取第二预设速率,以第二预设速率作为第二初始速率。
更进一步,当接收滑动停止指令时,动画的运动速率不为零时,则可以以动画的运动速率作为第二初始速率,也可以获取第二预设速率,将第二预设速率作为第二初始速率。当接收滑动停止指令时,动画的运动速率为零时,则获取第二预设速率,以第二预设速率作为第二初始速率。再进一步,终端设置了一个周期内已执行的动画路程参数与第二预设速率之间的对应关系,当以第二预设速率作为第二初始速率时,则根据该对应关系,获取与一个周期内已执行的动画路程参数对应的第二预设速率作为第二初始速率。
进一步,根据所需余下时间和第二初始速率计算动画的第二加速度。具体地,终端会确定第二路程,根据第二路程、所需余下时间和第二初始速率计算动画对应的第二加速度。其中,第二路程可以指在接收的滑动停止指令时,一个周期内动画的剩余路程,即可以根据一个周期内动画的总路程与一个周期内已执行的动画路程的差值得到第二路程。可以理解,第二路程可以是直线路程,也可以是曲线路程。
进一步,可结合以下公式进行第二加速度的计算,第二初始速率为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
进一步,终端中预先设置了第二按钮与至少一个的第一按钮之间的对应关系,根据该对应关系,获取当前第二按钮对应的至少一个的第一按钮,将对应的至少一个的第一按钮进行展示。更进一步,第一按钮和第二按钮之间的对应关系,用于表征第一按钮是第二按钮对应的分项按钮,即第一按钮是对第二按钮所表示内容的各项细化体现。
如图10所示,图10为一个实施例中的侧滑界面中主页面的显示界面。其中,当前第二按钮为“热门精选”,与当前第二按钮对应的第一按钮为B11“健康体检”、B12“上门理赔”和B13“物业缴费”。则将对应的第一按钮B11、B12和B13进行展示。可以理解,B11“健康体检”、B12“上门理赔”和B13“物业缴费”即为对“热门精选”内容的细化体现。
本实施例中,通过第一按钮和第二按钮将第一动画和第二动画关联起来,相当于根据第一动画和第二动画又组成了一个大的动画,在有限的显示空间下,增加了显示内容的多样性,提高了屏幕的显示利用率。
在一个实施例中,将对应的至少一个的第一按钮进行展示的步骤,包括:
根据第一按钮的移动速率或第三预设速率确定第一按钮的第三初始速率,控制第一按钮以第三初始速率模拟弹性运动至停止在弹性运动所在方向上预设的最终停止区域。
本实施例中,终端会确定第一按钮的第三初始速率。具体地,以第一按钮的移动速率或第三预设速率作为第一按钮的第三初始速率。进一步,可以参照前文描述的方法确定何时将第三预设速率或第一按钮的移动速率作为第三初始速率,在本步骤中对此不作赘述。
进一步,终端中在弹性运动所在方向上预设了最终停止区域。其中,最终停止区域可以是一个位置区间。终端会控制第一按钮以第三初始速率模拟弹性运动,并控制第一按钮模拟弹性运动后停止在弹性运动所在方向上预设的最终停止区域。
这里,模拟弹性运动即控制第一按钮以弹性运动的运动形式进行展示。即控制第一按钮在至少一个的方向反转位置之间移动。其中,方向反转位置指到达该位置时,第一按钮的移动方向发生反转。比如,第一按钮从上一个方向反转位置Y1向下一个方向反转位置Y2移动时,移动方向是竖直向下,则达到方向反转位置Y2时,移动方向发生反转,变为竖直向上,则第一按钮以竖直向上的方向从方向反转位置Y2向下一方向反转位置Y3移动,以此类推,最终控制第一按钮停止在弹性运动所在方向上预设的最终停止区域。
其中,在模拟弹性运动时,可以通过获取预设的上一方向反转位置到下一方向反转位置的预设距离和加速度来实现移动速率的递减,以实现模拟弹性运动。通过模拟弹性运动,可以使过渡更平滑,更加的符合自然力学,相较于直接地或者突然的显示而言,能够降低对显示器带来的负担。
可以理解,在其他实施例中,可以将与当前第二按钮对应的第一按钮在最终停止区域直接由无到有地渐变呈现。也可以控制第一按钮按照预设直线运动或曲线运动的路径移动至预设的最终停止区域。本发明实施例对此不作限定。
如图11所示,在一个实施例中,提供了一种侧滑界面的显示控制装置,该装置包括:
速度监测模块1102,用于实时获取滑动触控点的第一滑动速度,滑动触控点作用于侧滑界面上的任意位置,第一滑动速度包含第一滑动速率和第一滑动方向。
计算模块1104,用于根据第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据第一滑动方向确定菜单页面和主页面对应的侧滑方向。
滑动控制模块1106,用于控制菜单页面和主页面分别以第二滑动速率和第三滑动速率按照侧滑方向进行对应滑动。
在一个实施例中,主页面中包含动画;计算模块1104还用于根据第一滑动速度计算动画的运动参数。
该装置还包括:动画执行模块,用于根据运动参数执行动画。
在一个实施例中,动画包含第一动画和/或第二动画,第一动画包含转盘,第二动画包含第一按钮。本实施例中,计算模块1104还用于获取第一计算参数,根据第一计算参数和第一滑动速度计算转盘的转动速率及转动方向;和/或获取第二计算参数,根据第二计算参数和第一滑动速度计算第一按钮的移动速率及对应的移动方向。
在一个实施例中,计算模块1104还用于获取转盘的周长,获取预设的菜 单页面的最大宽度值,根据转盘的周长和菜单页面的最大宽度值的比值计算出第一计算参数。
在一个实施例中,计算模块1104还用于获取至少一个的第一按钮对应的预设移动区间值,根据预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据移动差值和菜单页面的最大宽度值的比值计算出第二计算参数。
在一个实施例中,转盘中包含第二按钮;该装置还包括:
对应角度确定模块,用于实时获取第二按钮对应的角度,第二按钮对应的角度为以转盘中心点为圆心,以经过转盘中心点的水平方向的直线为起始边进行旋转达到第二按钮的中心点时所经过的角度。
调整模块,用于根据第二按钮对应的角度和预设最大伸缩值调整第二按钮的大小。
在一个实施例中,计算模块1104还用于当接收到滑动停止指令时,计算从开始滑动到接收滑动停止指令时主页面所对应的已滑动距离。
本实施例中,该装置还包括:
获取模块,用于当已滑动距离大于或等于预设临界距离时,则获取主页面完成预设的最大滑动距离所需余下时间。
计算模块1104还用于根据第三滑动速率或第一预设速率确定主页面的第一初始速率,根据主页面完成预设的最大滑动距离所需余下时间和第一初始速率计算主页面对应的第一加速度。
滑动控制模块1106还用于控制主页面以第一初始速率和第一加速度按照侧滑方向减速滑动以完成预设的最大滑动距离。
在一个实施例中,获取模块还用于根据动画的运动参数中的运动速率或第二预设速率确定动画的第二初始速率。
计算模块1104还用于根据主页面完成预设的最大滑动距离所需余下时间和第二初始速率计算动画的第二加速度。
动画执行模块还用于根据第二加速度和第二初始速率减速执行一个周期 内的剩余动画。
上述侧滑界面的显示控制装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于基站的处理器中,也可以以软件形式存储于基站的存储器中,以便于处理器调用执行以上各个模块对应的操作。该处理器可以为中央处理单元(CPU)、微处理器、单片机等。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(Random Access Memory,RAM)等。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。

Claims (25)

  1. 一种侧滑界面的显示控制方法,包括:
    实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
    根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
    控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
  2. 根据权利要求1所述的方法,其特征在于,所述主页面中包含动画;在所述实时获取滑动触控点的第一滑动速度之后,所述方法还包括:
    根据所述第一滑动速度计算所述动画的运动参数,根据所述运动参数执行所述动画。
  3. 根据权利要求2所述的方法,其特征在于,所述动画包含第一动画和/或第二动画,所述第一动画包含转盘,所述第二动画包含第一按钮;
    所述根据所述第一滑动速度计算所述动画的运动参数包括:
    获取第一计算参数,根据所述第一计算参数和所述第一滑动速度计算所述转盘的转动速率及转动方向;和/或
    获取第二计算参数,根据所述第二计算参数和所述第一滑动速度计算所述第一按钮的移动速率及对应的移动方向。
  4. 根据权利要求3所述的方法,其特征在于,在获取第一计算参数之前,所述方法还包括:
    获取转盘的周长,获取预设的菜单页面的最大宽度值,根据所述转盘的周长和所述菜单页面的最大宽度值的比值计算出第一计算参数。
  5. 根据权利要求3所述的方法,其特征在于,在获取第二计算参数之前,所述方法还包括:
    获取至少一个的第一按钮对应的预设移动区间值,根据所述预设移动区 间值确定移动差值,获取预设的菜单页面的最大宽度值,根据所述移动差值和所述菜单页面的最大宽度值的比值计算出第二计算参数。
  6. 根据权利要求3所述的方法,其特征在于,所述转盘中包含第二按钮;所述方法还包括:
    实时获取所述第二按钮对应的角度,所述第二按钮对应的角度为以转盘中心点为圆心,以经过所述转盘中心点的水平方向的直线为起始边进行旋转达到所述第二按钮的中心点时所经过的角度;及
    根据所述第二按钮对应的角度和预设最大伸缩值调整所述第二按钮的大小。
  7. 根据权利要求1所述的方法,其特征在于,还包括:
    当接收到滑动停止指令时,则计算从开始滑动到接收所述滑动停止指令时所述主页面所对应的已滑动距离;
    当所述已滑动距离大于或等于预设临界距离时,则获取所述主页面完成预设的最大滑动距离所需余下时间;
    根据所述第三滑动速率或所述第一预设速率确定所述主页面的第一初始速率,根据所述主页面完成预设的最大滑动距离所需余下时间和所述第一初始速率计算所述主页面对应的第一加速度;及
    控制所述主页面以所述第一初始速率和所述第一加速度按照所述侧滑方向减速滑动以完成所述预设的最大滑动距离。
  8. 根据权利要求7所述的方法,其特征在于,在所述获取所述主页面完成预设的最大滑动距离所需余下时间之后,所述方法还包括:
    根据所述动画的运动参数中的运动速率或所述第二预设速率确定所述动画的第二初始速率;及
    根据所述主页面完成预设的最大滑动距离所需余下时间和所述第二初始速率计算所述动画的第二加速度,根据第二加速度和所述第二初始速率减速执行一个周期内的剩余动画。
  9. 一种侧滑界面的显示控制装置,包括:
    速度监测模块,用于实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
    计算模块,用于根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;
    滑动控制模块,用于控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
  10. 根据权利要求9所述的装置,其特征在于,所述主页面中包含动画;所述计算模块还用于根据所述第一滑动速度计算所述动画的运动参数;
    所述装置还包括:
    动画执行模块,用于根据所述运动参数执行所述动画。
  11. 根据权利要求10所述的装置,其特征在于,所述动画包含第一动画和/或第二动画,第一动画包含转盘,第二动画包含第一按钮;
    所述计算模块还用于获取第一计算参数,根据所述第一计算参数和所述第一滑动速度计算所述转盘的转动速率及转动方向;和/或获取第二计算参数,根据所述第二计算参数和所述第一滑动速度计算所述第一按钮的移动速率及对应的移动方向。
  12. 根据权利要求11所述的装置,其特征在于,所述计算模块还用于获取转盘的周长,获取预设的菜单页面的最大宽度值,根据所述转盘的周长和所述菜单页面的最大宽度值的比值计算出第一计算参数。
  13. 根据权利要求11所述的装置,其特征在于,所述计算模块还用于获取至少一个的第一按钮对应的预设移动区间值,根据所述预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据所述移动差值和所述菜单页面的最大宽度值的比值计算出第二计算参数。
  14. 根据权利要求11所述的装置,其特征在于,所述转盘中包含第二按钮;
    所述装置还包括:
    对应角度确定模块,用于实时获取所述第二按钮对应的角度,所述第二按钮对应的角度为以转盘中心点为圆心,以经过所述转盘中心点的水平方向的直线为起始边进行旋转达到所述第二按钮的中心点时所经过的角度;
    调整模块,用于根据所述第二按钮对应的角度和预设最大伸缩值调整所述第二按钮的大小。
  15. 根据权利要求9或10所述的装置,其特征在于,所述计算模块还用于当接收到滑动停止指令时,则计算从开始滑动到接收所述滑动停止指令时所述主页面所对应的已滑动距离;
    所述装置还包括:
    获取模块,用于当所述已滑动距离大于或等于预设临界距离时,则获取所述主页面完成预设的最大滑动距离所需余下时间;
    所述计算模块还用于根据所述第三滑动速率或所述第一预设速率确定所述主页面的第一初始速率,根据所述主页面完成预设的最大滑动距离所需余下时间和所述第一初始速率计算所述主页面对应的第一加速度;
    所述滑动控制模块还用于控制所述主页面以所述第一初始速率和所述第一加速度按照所述侧滑方向减速滑动以完成所述预设的最大滑动距离。
  16. 根据权利要求15所述的装置,其特征在于,所述获取模块还用于根据所述动画的运动参数中的运动速率或所述第二预设速率确定所述动画的第二初始速率;
    所述计算模块还用于根据所述主页面完成预设的最大滑动距离所需余下时间和所述第二初始速率计算所述动画的第二加速度;
    所述动画执行模块还用于根据第二加速度和所述第二初始速率减速执行一个周期内的剩余动画。
  17. 一种终端,包括存储器和处理器,所述存储器中存储有指令,所述指令被所述处理器执行时,使得所述处理器执行以下步骤:
    实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面 上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
    根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
    控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
  18. 根据权利要求17所述的终端,其特征在于,所述主页面中包含动画;
    在所述实时获取滑动触控点的第一滑动速度之后,所述处理器还执行以下步骤:
    根据所述第一滑动速度计算所述动画的运动参数,根据所述运动参数执行所述动画。
  19. 根据权利要求18所述的终端,其特征在于,所述动画包含第一动画和/或第二动画,所述第一动画包含转盘,所述第二动画包含第一按钮;
    所述处理器所执行的所述根据所述第一滑动速度计算所述动画的运动参数包括:
    获取第一计算参数,根据所述第一计算参数和所述第一滑动速度计算所述转盘的转动速率及转动方向;和/或
    获取第二计算参数,根据所述第二计算参数和所述第一滑动速度计算所述第一按钮的移动速率及对应的移动方向。
  20. 根据权利要求19所述的终端,其特征在于,在获取第一计算参数之前,所述处理器还执行以下步骤:
    获取转盘的周长,获取预设的菜单页面的最大宽度值,根据所述转盘的周长和所述菜单页面的最大宽度值的比值计算出第一计算参数。
  21. 根据权利要求19所述的终端,其特征在于,在获取第二计算参数之前,所述处理器还执行以下步骤:
    获取至少一个的第一按钮对应的预设移动区间值,根据所述预设移动区间值确定移动差值,获取预设的菜单页面的最大宽度值,根据所述移动差值 和所述菜单页面的最大宽度值的比值计算出第二计算参数。
  22. 根据权利要求19所述的终端,其特征在于,所述转盘中包含第二按钮;
    所述处理器还执行以下步骤:
    实时获取所述第二按钮对应的角度,所述第二按钮对应的角度为以转盘中心点为圆心,以经过所述转盘中心点的水平方向的直线为起始边进行旋转达到所述第二按钮的中心点时所经过的角度;及
    根据所述第二按钮对应的角度和预设最大伸缩值调整所述第二按钮的大小。
  23. 根据权利要求17所述的终端,其特征在于,所述处理器还执行以下步骤:
    当接收到滑动停止指令时,则计算从开始滑动到接收所述滑动停止指令时所述主页面所对应的已滑动距离;
    当所述已滑动距离大于或等于预设临界距离时,则获取所述主页面完成预设的最大滑动距离所需余下时间;
    根据所述第三滑动速率或所述第一预设速率确定所述主页面的第一初始速率,根据所述主页面完成预设的最大滑动距离所需余下时间和所述第一初始速率计算所述主页面对应的第一加速度;及
    控制所述主页面以所述第一初始速率和所述第一加速度按照所述侧滑方向减速滑动以完成所述预设的最大滑动距离。
  24. 根据权利要求23所述的终端,其特征在于,在所述获取所述主页面完成预设的最大滑动距离所需余下时间之后,所述处理器还执行以下步骤:
    根据所述动画的运动参数中的运动速率或所述第二预设速率确定所述动画的第二初始速率;及
    根据所述主页面完成预设的最大滑动距离所需余下时间和所述第二初始速率计算所述动画的第二加速度,根据第二加速度和所述第二初始速率减速执行一个周期内的剩余动画。
  25. 一个或多个存储有计算机可执行指令的非易失性可读存储介质,所述计算机可执行指令被一个或多个处理器执行时,使得所述一个或多个处理器执行以下步骤:
    实时获取滑动触控点的第一滑动速度,所述滑动触控点作用于侧滑界面上的任意位置,所述第一滑动速度包含第一滑动速率和第一滑动方向;
    根据所述第一滑动速率计算菜单页面对应的第二滑动速率和主页面对应的第三滑动速率,根据所述第一滑动方向确定所述菜单页面和所述主页面对应的侧滑方向;及
    控制所述菜单页面和所述主页面分别以所述第二滑动速率和所述第三滑动速率按照所述侧滑方向进行对应滑动。
PCT/CN2017/077547 2016-05-06 2017-03-21 侧滑界面的显示控制方法和装置、终端和存储介质 WO2017190560A1 (zh)

Priority Applications (6)

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

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

Publications (1)

Publication Number Publication Date
WO2017190560A1 true WO2017190560A1 (zh) 2017-11-09

Family

ID=56991309

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/077547 WO2017190560A1 (zh) 2016-05-06 2017-03-21 侧滑界面的显示控制方法和装置、终端和存储介质

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 (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108845756A (zh) * 2018-07-04 2018-11-20 Oppo广东移动通信有限公司 触控操作方法、装置、存储介质及电子设备
CN109814781A (zh) * 2017-11-22 2019-05-28 腾讯数码(天津)有限公司 页面滑动方法、装置
CN114465969A (zh) * 2021-12-23 2022-05-10 珠海格力电器股份有限公司 通讯消息组的管理方法、装置、设备和存储介质

Families Citing this family (26)

* 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
US10650052B2 (en) 2014-06-24 2020-05-12 Apple Inc. Column interface for navigating in a user interface
KR20240138132A (ko) 2014-06-24 2024-09-20 애플 인크. 입력 디바이스 및 사용자 인터페이스 상호작용
CN105975181B (zh) * 2016-05-06 2019-01-04 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置
US11966560B2 (en) 2016-10-26 2024-04-23 Apple Inc. User interfaces for browsing content from multiple content applications on an electronic device
CN106502514B (zh) * 2016-11-04 2019-09-17 上海传英信息技术有限公司 侧滑菜单的控制方法及用户终端
CN107450911A (zh) * 2017-07-05 2017-12-08 口碑(上海)信息技术有限公司 动画元素的播放方法、装置以及电子设备
CN110321042B (zh) * 2018-03-30 2022-08-05 阿里巴巴集团控股有限公司 界面信息展示方法、装置及电子设备
CN108845750A (zh) * 2018-06-08 2018-11-20 北京奇虎科技有限公司 一种启动控件的方法及终端设备
CN108984096A (zh) * 2018-07-04 2018-12-11 Oppo广东移动通信有限公司 触控操作方法、装置、存储介质及电子设备
CN108897489B (zh) * 2018-07-25 2020-11-06 上海携程商务有限公司 页面返回的交互方法、系统、设备和存储介质
CN114302210B (zh) 2019-03-24 2024-07-05 苹果公司 用于查看和访问电子设备上的内容的用户界面
US11445263B2 (en) * 2019-03-24 2022-09-13 Apple Inc. User interfaces including selectable representations of content items
CN113906419A (zh) 2019-03-24 2022-01-07 苹果公司 用于媒体浏览应用程序的用户界面
US11797606B2 (en) 2019-05-31 2023-10-24 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
CN110471594B (zh) * 2019-08-22 2022-02-22 北京字节跳动网络技术有限公司 一种页面调整方法、装置、设备及介质
CN112860141A (zh) * 2019-11-28 2021-05-28 华为技术有限公司 一种操作屏幕图标的方法及装置
CN111290691A (zh) * 2020-01-16 2020-06-16 北京京东振世信息技术有限公司 用于操作页面的方法、装置、计算机设备及可读存储介质
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
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 (3)

* 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 苹果公司 用于管理同时打开的软件应用的设备、方法和图形用户界面
CN105975181A (zh) * 2016-05-06 2016-09-28 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置

Family Cites Families (16)

* 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
CN104011637A (zh) * 2012-01-09 2014-08-27 爱尔比奎特公司 用于移动设备的用户界面
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 삼성전자주식회사 이동 단말에서 화면 표시 방법 및 이를 위한 이동 단말
CN103135929A (zh) * 2013-01-31 2013-06-05 北京小米科技有限责任公司 控制应用界面移动的方法、装置和终端设备
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 삼성전자주식회사 스크린을 제어하는 전자 장치 및 방법
KR101522468B1 (ko) * 2013-12-05 2015-05-28 네이버 주식회사 동영상 간 전환 방법 및 그 시스템
CN103838510A (zh) * 2014-02-27 2014-06-04 北京六间房科技有限公司 一种界面控制装置
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

Patent Citations (3)

* 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 苹果公司 用于管理同时打开的软件应用的设备、方法和图形用户界面
CN105975181A (zh) * 2016-05-06 2016-09-28 平安科技(深圳)有限公司 侧滑界面的显示控制方法和装置

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109814781A (zh) * 2017-11-22 2019-05-28 腾讯数码(天津)有限公司 页面滑动方法、装置
CN109814781B (zh) * 2017-11-22 2023-09-08 腾讯数码(天津)有限公司 页面滑动方法、装置
CN108845756A (zh) * 2018-07-04 2018-11-20 Oppo广东移动通信有限公司 触控操作方法、装置、存储介质及电子设备
CN114465969A (zh) * 2021-12-23 2022-05-10 珠海格力电器股份有限公司 通讯消息组的管理方法、装置、设备和存储介质
CN114465969B (zh) * 2021-12-23 2023-07-04 珠海格力电器股份有限公司 通讯消息组的管理方法、装置、设备和存储介质

Also Published As

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

Similar Documents

Publication Publication Date Title
WO2017190560A1 (zh) 侧滑界面的显示控制方法和装置、终端和存储介质
US11727650B2 (en) Systems, methods, and graphical user interfaces for displaying and manipulating virtual objects in augmented reality environments
US10762716B1 (en) Devices, methods, and graphical user interfaces for displaying objects in 3D contexts
US10061496B2 (en) Snapping of object features via dragging
US9146672B2 (en) Multidirectional swipe key for virtual keyboard
US9423932B2 (en) Zoom view mode for digital content including multiple regions of interest
US8464181B1 (en) Floor selection on an interactive digital map
US9684412B2 (en) Method and apparatus for generating a three-dimensional user interface
US20140245232A1 (en) Vertical floor expansion on an interactive digital map
EP2602706A2 (en) User interactions
US20130111398A1 (en) Methods and apparatuses for window display, and methods and apparatuses for touch-operating an application
US20110202834A1 (en) Visual motion feedback for user interface
US10133454B2 (en) Stackable pagination indicators
WO2016145832A1 (zh) 终端的操作方法及装置
CN106445357B (zh) 一种滑动条控件控制方法和移动终端
CA2787112A1 (en) Multi-layer user interface with flexible parallel movement
TW201401148A (zh) 圖示顯示方法及圖示顯示裝置
US11275501B2 (en) Creating tables using gestures
WO2017097142A1 (zh) 界面操作的处理方法、装置和智能终端
TWI724096B (zh) 介面操作的處理方法、裝置和智慧終端
US11460987B2 (en) Modifying graphical user interface processing based on interpretation of user intent
WO2017097141A1 (zh) 输入操作的处理方法、装置和智能终端
JP2016511898A (ja) ユーザ端末及びそのイメージ表示方法

Legal Events

Date Code Title Description
WWE Wipo information: entry into national phase

Ref document number: 2018519722

Country of ref document: JP

WWE Wipo information: entry into national phase

Ref document number: 11201805502W

Country of ref document: SG

ENP Entry into the national phase

Ref document number: 20187018398

Country of ref document: KR

Kind code of ref document: A

ENP Entry into the national phase

Ref document number: 2017259235

Country of ref document: AU

Date of ref document: 20170321

Kind code of ref document: A

NENP Non-entry into the national phase

Ref country code: DE

121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17792387

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2017792387

Country of ref document: EP

Effective date: 20181206