CN114356175B

CN114356175B - Method and device for realizing annular rolling list

Info

Publication number: CN114356175B
Application number: CN202111634155.7A
Authority: CN
Inventors: 周健平; 林伟铃; 谢睿
Original assignee: Guangzhou Quwan Network Technology Co Ltd
Current assignee: Guangzhou Quwan Network Technology Co Ltd
Priority date: 2021-12-29
Filing date: 2021-12-29
Publication date: 2023-08-11
Anticipated expiration: 2041-12-29
Also published as: CN114356175A

Abstract

The invention discloses a method and a device for realizing a ring-shaped rolling list, wherein the method comprises the following steps: acquiring all first menu options in a visible area of a list in a target menu option list at the starting time and initial positions of the first menu options; based on a preset inertia plug-in, determining the rolling quantity generated when a user drags a target menu option list, and further determining the rolling quantity on a preset visual arc; according to the scrolling amount on the preset visual arc, determining all second menu options and the ending positions thereof in a list visual area in the target menu option list at the scrolling ending time; and according to the initial position of each first menu option and the end position of each second menu option, the target menu option list is scrolled by inertia so that all the second menu options are displayed in the visible area of the list. Therefore, by implementing the method and the device, the scrolling of the annular list with the inertial effect and natural and comfortable interaction can be realized on the APP, so that the interaction efficiency of the user is improved, and the interaction experience of the user is improved.

Description

Method and device for realizing annular rolling list

Technical Field

The invention relates to the technical field of page visualization, in particular to a method and a device for realizing a ring-shaped rolling list.

Background

In real life, in order to improve the interactive experience of the user, an annular wheel disc menu needs to be realized so that the user can rotate the wheel disc menu to select corresponding contents according to own requirements. However, IOS or Android native systems do not provide a ring-shaped roulette menu control for use by a developer. The current common implementation scheme is that a developer calculates the position of each option on a menu on a circular ring through a trigonometric function, and additionally adds a dragging gesture to realize the circular ring scrolling effect. The existing scheme can realize the basic rolling effect, controls the circular ring to rotate by a fixed amplitude according to the sliding amplitude of the gesture of the user, namely, the current circular ring rotates without any inertial effect, the user interaction effect is very hard, the user interaction efficiency is not improved, and the user interaction experience is further reduced. Therefore, how to implement annular list scrolling with inertial effect and natural and comfortable interaction on the APP so as to improve the interaction efficiency of the user and further improve the interaction experience of the user is a technical problem which is still to be solved by the person skilled in the art.

Disclosure of Invention

The invention aims to solve the technical problem of realizing annular list rolling with an inertia effect and natural and comfortable interaction on an APP, and provides a method and a device for realizing annular rolling list, which can realize annular list rolling with an inertia effect and natural and comfortable interaction on the APP, and are beneficial to improving the interaction efficiency of users and further improving the interaction experience of the users.

In order to solve the technical problem, the first aspect of the present invention discloses a method for implementing a ring scrolling list, where the method includes:

acquiring all first menu options with the scrolling starting time in a visible area of a list, wherein the first menu options are menu options in a target menu option list;

determining an initial position of each first menu option on a preset visual arc in the list visual area;

determining a first scroll amount of the target menu option list based on a preset inertia plug-in, wherein the first scroll amount is a scroll amount generated by dragging the target menu option list by a user;

determining a second scrolling amount of the target menu option list according to the first scrolling amount of the target menu option list, wherein the second scrolling amount is the scrolling amount of the target menu option list on the preset visual circular arc;

determining all second menu options with the scrolling end time in the visible area of the list according to the second scrolling amount of the target menu option list, and determining the end position of each second menu option on a preset visible circular arc in the visible area of the list, wherein the second menu options are menu options in the target menu option list;

And according to the initial position of each first menu option on the preset visual arc in the list visual area and the end position of each second menu option on the preset visual arc in the list visual area, the target menu option list is scrolled in an inertial mode, so that all the second menu options are displayed in the list visual area, and each second menu option is positioned at the end position of the second menu option on the preset visual arc in the list visual area.

As an optional implementation manner, in the first aspect of the present invention, the determining, based on a preset inertia plug-in, a first scroll amount of the target menu option list includes:

acquiring the dragging displacement of a user dragging the target menu option list in the vertical direction of the visible area of the list and the dragging time length of the user dragging the target menu option list based on a preset inertia plug-in;

and determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list according to the dragging displacement, the dragging duration and the preset rolling coefficient, and determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list as the first rolling quantity of the target menu option list.

In an optional implementation manner, in the first aspect of the present invention, after the acquiring, based on the preset inertia plug-in, a drag displacement of the user dragging the target menu option list in a vertical direction of the list visible area, and a drag duration of the user dragging the target menu option list, the method further includes:

judging whether the dragging time length of the target menu option list dragged by the user is smaller than a first preset threshold value or not, and whether the dragging displacement of the target menu option list dragged by the user in the vertical direction of the visible area of the list is larger than a second preset threshold value or not;

and when the dragging duration of the user dragging the target menu option list is smaller than a first preset threshold value and the dragging displacement of the user dragging the target menu option list in the vertical direction of the list visual area is larger than a second preset threshold value, executing the operation of determining the rolling quantity of the target menu option list in the vertical direction of the list visual area according to the dragging displacement, the dragging duration and a preset rolling coefficient and determining the rolling quantity of the target menu option list in the vertical direction of the list visual area as the first rolling quantity of the target menu option list.

As an optional implementation manner, in the first aspect of the present invention, before the determining, according to the first scroll amount of the target menu option list, the second scroll amount of the target menu option list, the method further includes:

acquiring a first content height of the preset visual arc in the list visual area, wherein the first content height of the preset visual arc is the sum of content heights of a plurality of menu options accommodated by the preset visual arc;

determining a standard circle corresponding to the preset visual arc in the list visual area;

determining a second content height of the standard circle according to the first content height of the preset visual circular arc;

the determining, according to the first scroll amount of the target menu option list, a second scroll amount of the target menu option list includes:

and determining the scrolling amount of the target menu option list on the standard circle according to the second content height of the standard circle corresponding to the first scrolling amount of the target menu option list and the preset visual circular arc, and determining the scrolling amount of the target menu option list on the standard circle as the second scrolling amount of the target menu option list.

As an optional implementation manner, in the first aspect of the present invention, the determining, according to the second scroll amount of the target menu option list, all second menu options whose scroll end moments are in the visible area of the list includes:

determining the rotation angle of the target menu option list according to the second scrolling amount of the target menu option list;

determining an included angle between each menu option in the target menu option list and the coordinate axis of the standard circle in the vertical direction at the moment of finishing scrolling according to the rotation angle of the target menu option list;

for each menu option in the target menu option list, judging whether the included angle between the menu option and the coordinate axis of the standard circle in the vertical direction is in the angle range corresponding to the preset visual arc;

if the included angle between the menu option and the coordinate axis of the standard circle in the vertical direction is within the angle range corresponding to the preset visual arc, determining the menu option as a second menu option in the list visual area;

acquiring all second menu options in the target menu option list, which are in the visible area of the list;

The determining an end position of each of the second menu options on a preset visual arc in the list visual area includes:

and determining the ending position of each second menu option on a preset visual arc in the list visual area according to the included angle between each second menu option and the coordinate axis of the standard circle in the vertical direction.

As an optional implementation manner, in the first aspect of the present invention, before determining, according to the second scroll amount of the target menu option list, all second menu options whose scroll end moments are in the visible area of the list, the method further includes:

determining the scrolling speed at the scrolling start time according to the dragging displacement of the target menu option list in the vertical direction of the visible area of the list and the dragging time of the target menu option list dragged by the user;

determining the rolling time of list rolling according to the rolling speed of the rolling starting moment and the rolling quantity of the target menu option list in the vertical direction of the list visible area;

and determining the rolling ending time according to the rolling starting time and the rolling time of the list rolling.

As an optional implementation manner, in the first aspect of the present invention, the inertial scrolling the target menu option list according to an initial position of each of the first menu options on a preset visual arc in the list visual area and an end position of each of the second menu options on the preset visual arc in the list visual area, so that all the second menu options are displayed in the list visual area, and each of the second menu options is located at an end position of the second menu option on the preset visual arc in the list visual area, includes:

determining the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling according to a preset slow function and the rolling time of the list rolling;

and according to the initial position of each first menu option on the preset visual arc in the list visual area and the end position of each second menu option on the preset visual arc in the list visual area, and the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the scrolling time of the list scrolling, inertially scrolling the target menu option list so as to display all the second menu options in the list visual area and enable each second menu option to be positioned at the end position of the second menu option on the preset visual arc in the list visual area.

The second aspect of the present invention discloses a device for implementing a ring scrolling list, the device comprising:

the first position module is used for acquiring all first menu options with the scrolling starting time in the visible area of the list, wherein the first menu options are menu options in the target menu option list; determining an initial position of each first menu option on a preset visual arc in the list visual area;

the first determining module is used for determining a first scroll amount of the target menu option list based on a preset inertia plug-in, wherein the first scroll amount is a scroll amount generated by dragging the target menu option list by a user;

a second determining module, configured to determine a second scroll amount of the target menu option list according to the first scroll amount of the target menu option list, where the second scroll amount is a scroll amount of the target menu option list on the preset visual arc;

the second position module is used for determining all second menu options with the scrolling end moment in the visible area of the list according to the second scrolling amount of the target menu option list, and determining the end position of each second menu option on a preset visible circular arc in the visible area of the list, wherein the second menu options are menu options in the target menu option list;

And the scrolling module is used for performing inertial scrolling on the target menu option list according to the initial position of each first menu option in the first position module on the preset visual arc in the list visual area and the end position of each second menu option in the second position module on the preset visual arc in the list visual area so as to display all the second menu options in the list visual area, wherein each second menu option is positioned at the end position of the second menu option on the preset visual arc in the list visual area.

As an optional implementation manner, in the second aspect of the present invention, the first determining module includes:

the acquisition sub-module is used for acquiring the dragging displacement of a user for dragging the target menu option list in the vertical direction of the visible area of the list and the dragging time length of the user for dragging the target menu option list based on a preset inertia plug-in;

and the determining submodule is used for determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list according to the dragging displacement, the dragging duration and the preset rolling coefficient, and determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list as the first rolling quantity of the target menu option list.

As an optional implementation manner, in the second aspect of the present invention, the first determining module further includes:

the judging sub-module is used for acquiring the dragging displacement of a user dragging the target menu option list in the vertical direction of the visible area of the list based on a preset inertia plug-in, judging whether the dragging time of the user dragging the target menu option list is smaller than a first preset threshold value or not and judging whether the dragging displacement of the user dragging the target menu option list in the vertical direction of the visible area of the list is larger than a second preset threshold value or not after the dragging time of the user dragging the target menu option list;

and the determining submodule is further used for executing the operation of determining the rolling quantity of the target menu option list in the vertical direction of the list visual area according to the dragging displacement, the dragging duration and the preset rolling coefficient when the judging submodule judges that the dragging duration of the target menu option list dragged by the user is smaller than a first preset threshold value and the dragging displacement of the target menu option list in the vertical direction of the list visual area is larger than a second preset threshold value, and determining the rolling quantity of the target menu option list in the vertical direction of the list visual area as the first rolling quantity of the target menu option list.

As an alternative embodiment, in the second aspect of the present invention, the apparatus further includes: a content height determination module;

the content height determining module is configured to obtain a first content height of the preset visual arc in the visible area of the list before the second determining module determines a second scroll amount of the target menu option list according to the first scroll amount of the target menu option list, where the first content height of the preset visual arc is a sum of content heights of a plurality of menu options accommodated in the preset visual arc; determining a standard circle corresponding to the preset visual arc in the list visual area; determining a second content height of the standard circle according to the first content height of the preset visual circular arc;

the second determining module determines, according to the first scroll amount of the target menu option list, a second scroll amount of the target menu option list in a manner including:

In a second aspect of the present invention, the means for determining, according to the second scroll amount of the target menu option list, all second menu options whose scroll end time is in the visible area of the list by the second position module includes:

The second position module determining an ending position of each of the second menu options on a preset visual arc in the list visual area includes:

As an alternative embodiment, in the second aspect of the present invention, the apparatus further includes: a finishing moment determining module;

the end time determining module is configured to determine, before the second location module determines, according to the second scroll amount of the target menu option list, that the scroll end time is in all second menu options in the visible area of the list, according to a drag displacement of the user dragging the target menu option list in a vertical direction of the visible area of the list, and a drag duration of the user dragging the target menu option list, and determine a scroll speed at the scroll start time; determining the rolling time of list rolling according to the rolling speed of the rolling starting moment and the rolling quantity of the target menu option list in the vertical direction of the list visible area; and determining the rolling ending time according to the rolling starting time and the rolling time of the list rolling.

As an optional implementation manner, in the second aspect of the present invention, the manner in which the scrolling module inertially scrolls the target menu option list according to the initial position of each first menu option on the preset visual arc in the list visual area and the end position of each second menu option on the preset visual arc in the list visual area, so that all the second menu options are displayed in the list visual area, and each second menu option is located at the end position of the second menu option on the preset visual arc in the list visual area includes:

The third aspect of the present invention discloses another implementation apparatus for a ring scrolling list, the apparatus comprising:

a memory storing executable program code;

a processor coupled to the memory;

the processor invokes the executable program code stored in the memory to execute the implementation method of the annular scrolling list disclosed in the first aspect of the present invention.

A fourth aspect of the invention discloses a computer-readable medium storing computer instructions which, when invoked, are adapted to carry out the method of implementing the annular scrolling list disclosed in the first aspect of the invention.

Compared with the prior art, the embodiment of the invention has the following beneficial effects:

in the embodiment of the invention, all first menu options in a list visible area and initial positions thereof on a preset visible arc in a target menu option list at the rolling start time are acquired; based on a preset inertia plug-in, determining the rolling amount generated when a user drags the target menu option list, and further determining the rolling amount of the target menu option list on a preset visual arc; according to the rolling quantity of the target menu option list on the preset visual circular arc, determining all second menu options with rolling end time in the list visual area in the target menu option list and the end positions of the second menu options on the preset visual circular arc; and according to the initial position of each first menu option and the end position of each second menu option, inertially scrolling the target menu option list so as to display all the second menu options in the list visual area. Therefore, by implementing the method and the device, the scrolling of the annular list with the inertial effect and natural and comfortable interaction can be realized on the APP, so that the interaction efficiency of the user is improved, and the interaction experience of the user is improved.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present invention, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow diagram of a method for implementing a circular scrolling list according to an embodiment of the present invention;

FIG. 2 is a flow chart of another implementation method of a ring rolling list disclosed in the embodiment of the invention

FIG. 3 is a schematic structural diagram of a device for implementing a circular scrolling list according to an embodiment of the present invention;

FIG. 4 is a schematic diagram of another device for implementing a circular scrolling list according to an embodiment of the present invention

FIG. 5 is a schematic diagram of a device for implementing a circular scrolling list according to an embodiment of the present invention

Fig. 6 is a schematic structural diagram of a device for implementing a ring scrolling list according to an embodiment of the present invention.

Detailed Description

In order that those skilled in the art will better understand the present invention, a technical solution in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present invention, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

The terms first, second and the like in the description and in the claims and in the above-described figures are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order. Furthermore, the terms "comprise" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, apparatus, article, or article that comprises a list of steps or elements is not limited to only those listed but may optionally include other steps or elements not listed or inherent to such process, method, article, or article.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the invention. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.

The invention discloses a method and a device for realizing annular rolling list, which can realize the rolling of an annular list with inertia effect and natural and comfortable interaction on an APP, and are beneficial to improving the interaction efficiency of users and further improving the interaction experience of the users. The following will describe in detail.

Example 1

Referring to fig. 1, fig. 1 is a flow chart of a method for implementing a ring scrolling list according to an embodiment of the invention. The implementation method of the annular scrolling list described in fig. 1 can be applied to an Android system or an IOS system, and the embodiment of the invention is not limited. As shown in fig. 1, the implementation method of the annular scrolling list may include the following operations:

s101, acquiring all first menu options with the scrolling starting time in a visible area of the list, wherein the first menu options are menu options in a target menu option list.

In the embodiment of the invention, menu options in the target menu option list are displayed in a list visual area, and the list visual area comprises a preset visual arc. The preset visual circular arc of the list visual area is exemplified to be a semicircle, each menu option is placed around the center of a standard circle corresponding to the preset visual circular arc, and when the preset visual circular arc is assumed to be a semicircle, 6 menu options are displayed at most, namely each menu option is placed around the center at intervals of 30 degrees. The number of menu options which can be displayed in the preset visual arc can be set according to the requirements of actual application scenes. And taking the current moment as the scrolling starting moment, acquiring all menu options in the list visible area in the current target menu option list, and obtaining a plurality of first menu options.

S102, determining the initial position of each first menu option on a preset visual arc in the list visual area.

In the embodiment of the invention, after a plurality of first menu options are determined, the position coordinate of each first menu option can be determined. The initial coordinates of each menu option can be calculated by a trigonometric function according to the position of the center of a standard circle corresponding to the preset visual arc, the radius of the standard circle and the initial radian angle between each menu option and the coordinate axis of the vertical direction of the standard circle.

let centerX:CGFloat＝circlePoint.x+radius*cos(radian)

let centerY:CGFloat＝circlePoint.y+radius*sin(radian)

Wherein centerX, centerY is the (X, Y) coordinate of a menu item, and the circlePoint. X and circlePoint. Y are the center (X, Y) coordinates of a standard circle, radius is the radius of the standard circle, and radius is the radian angle between the menu item and the coordinate axis of the standard circle.

S103, determining a first scroll amount of the target menu option list based on a preset inertia plug-in, wherein the first scroll amount is generated when a user drags the target menu option list.

In the embodiment of the invention, the scroll quantity generated when the user's finger drags the target menu option list can be obtained based on UISCROLView in the iOS system or ScrollView inertial plug-in the Android system. In the embodiment of the invention, optionally, the rolling amount generated in the vertical direction of the standard circle when the user drags the target menu option list with the finger is obtained as the first rolling amount.

S104, determining a second scrolling amount of the target menu option list according to the first scrolling amount of the target menu option list, wherein the second scrolling amount is the scrolling amount of the target menu option list on a preset visual circular arc.

In the embodiment of the invention, the second scrolling amount of the target menu option list on the preset visual arc is determined according to the scrolling amount generated when the user rotates the target menu option list by fingers, and the second scrolling amount of the target menu option list can be the rotation percentage of the target menu option list.

In an embodiment of the present invention, optionally, step S104, before determining the second scroll amount of the target menu option list according to the first scroll amount of the target menu option list, the method further includes:

acquiring a first content height of a preset visual arc in a list visual area, wherein the first content height of the preset visual arc is the sum of content heights of a plurality of menu options accommodated by the preset visual arc;

determining a standard circle corresponding to a preset visual arc in a list visual area;

and determining the second content height of the standard circle according to the first content height of the preset visual circular arc.

In an alternative embodiment of the present invention, to implement scrolling of the target menu option list, a content size contentSize larger than the content size occupied by the viewable area of the list itself needs to be preset, that is, the size in which the content can be accommodated is set. For example, if the preset visual arc of the list visual area is a semicircle, 6 menu options are displayed at most, and the required content height of each menu option is size1, the first content height of the preset visual arc in the list visual area can be determined according to the required content height of each menu option, that is, the content height is 6 x sizer 1 when the preset visual arc is a semicircle. Meanwhile, a circle of standard circles can be determined to accommodate 12 menu options, and further, a second content height oneround with a corresponding standard circle is determined according to the first content height of the preset visual circular arc=12×size1.

In addition, the content height required by the target menu option list can be determined according to the number of all the menu options in the target menu option list:

contentSize＝CGSize(width:0,height:size1)*CGFloat((Option.count))

wherein content size is the content height of the target menu option list, CGsize (width: 0, height: size1) is the content height of one menu option, and Option. Count is the number of menu options in the target menu option list.

In an optional embodiment of the present invention, further optionally, step S104, determining, according to the first scroll amount of the target menu option list, a second scroll amount of the target menu option list includes:

and determining the rolling amount of the target menu option list on the standard circle according to the second content height of the standard circle corresponding to the first rolling amount of the target menu option list and the preset visible circular arc, and determining the rolling amount of the target menu option list on the standard circle as the second rolling amount of the target menu option list.

In an alternative embodiment of the invention, the rotation percentage of the target menu option list on the standard circle is determined according to the first rolling amount generated when the current user drags the target menu option list and the content height of the circle of users contained in the standard circle corresponding to the annular wheel disc menu.

progress＝offsetY/oneRoundContentHeight

Wherein progress is a rotation percentage, offsetY is a first scroll amount of the target menu option list, and oneRoundContentHeight is a second content height of a standard circle corresponding to a preset visual arc.

It can be seen that implementing this alternative embodiment, the scrolling amount of the menu list in the vertical direction can be converted into the scrolling amount on the preset circular arc, and a scrolling basis for scrolling the annular list is constructed.

S105, determining all second menu options with the scrolling end time in the visible area of the list according to the second scrolling amount of the target menu option list, wherein the second menu options are menu options in the target menu option list.

In the embodiment of the invention, after the second scrolling amount of the target menu option list is determined, all menu options in the visible area of the list in the target menu option list can be determined when the scrolling is finished, so that a plurality of second menu options are obtained.

In the embodiment of the present invention, optionally, step S105, according to the second scroll amount of the target menu option list, determines all the second menu options with scroll end time within the visible area of the list, including the following steps:

Determining an included angle between each menu option in the target menu option list at the moment of the rolling end and the coordinate axis of the standard circle in the vertical direction according to the rotation angle of the target menu option list;

judging whether the included angle between each menu option in the target menu option list and the coordinate axis of the standard circle in the vertical direction is in the angle range corresponding to the preset visual arc or not;

all second menu options in the target menu option list that are within the viewable area of the list are acquired.

In an alternative embodiment of the present invention, after determining the second scroll amount of the target menu option list on the standard circle, the second scroll amount may be a rotation percentage of the target menu option list on the standard circle. Based on the second scroll amount and the standard circumference angle of 360 degrees, the rotation angle of the target menu option list can be determined. And calculating the included angle between each menu option and the coordinate axis of the standard circle vertical direction when the scrolling is finished according to the rotating angle of the target menu option list. And further determining a plurality of second menu options with the scrolling end time in the list visible area according to the angle range corresponding to the preset visible circular arc of the included angle between each menu option and the coordinate axis of the standard circle in the vertical direction.

It can be seen that, by implementing this alternative embodiment, a plurality of menu options to be displayed to the user when the rotation is finished can be determined according to the rotation angle of the list on the standard circle corresponding to the preset visual arc.

S106, determining the end position of each second menu option on the preset visual arc in the list visual area.

In the embodiment of the invention, after the plurality of second menu options are determined, the position coordinate of each second menu option can be determined.

In an embodiment of the present invention, optionally, step S106, determining an end position of each second menu option on a preset visual arc in the list visual area includes:

It will be seen that implementing this alternative embodiment enables the position coordinates of a plurality of menu options to be presented to the user to be accurately determined.

S107, the target menu option list is scrolled by inertia according to the initial position of each first menu option on the preset visual arc in the list visual area and the end position of each second menu option on the preset visual arc in the list visual area, so that all the second menu options are displayed in the list visual area, and each second menu option is positioned at the end position of the second menu option on the preset visual arc in the list visual area.

According to the initial position of the first menu option and the end position of the second menu option, the inertial scrolling of the target menu option list is controlled, so that the second menu option is displayed at the end position corresponding to each second menu option in the list visual area, and the scrolling of the menu option with the inertial effect is realized on the preset visual circular arc in the list visual area.

Therefore, by implementing the implementation method of the annular scrolling list shown in fig. 1, the scrolling of the annular scrolling list with inertia effect and natural and comfortable interaction can be realized on the APP, which is beneficial to improving the interaction efficiency of the user and further improving the interaction experience of the user.

Example two

Referring to fig. 2, fig. 2 is a flow chart of another implementation method of a ring scrolling list according to an embodiment of the invention. The implementation method of the annular scrolling list described in fig. 2 can be applied to an Android system or an IOS system, and the embodiment of the invention is not limited. As shown in fig. 2, the implementation method of the annular scrolling list may include the following operations:

s201, acquiring all first menu options with the scrolling starting time in a visible area of the list, wherein the first menu options are menu options in a target menu option list.

S202, determining the initial position of each first menu option on a preset visual arc in the list visual area.

In the embodiment of the present invention, for other detailed descriptions of the steps S201 to S202, please refer to the detailed descriptions of the steps S101 to S102 in the first embodiment, and the detailed descriptions of the embodiments of the present invention are omitted.

S203, acquiring the dragging displacement of a user dragging the target menu option list in the vertical direction of the visible area of the list and the dragging time length of the user dragging the target menu option list based on a preset inertia plug-in.

In the embodiment of the invention, in order to realize the inertial scrolling of the target menu option list, the scrolling parameters of the target menu option list need to be acquired. And acquiring the dragging displacement of the user dragging the target menu option list in the vertical direction of the visible area of the list and the dragging time length of the user dragging the target menu option list based on the preset inertia plug-in. According to the dragging displacement and the dragging time length, the scrolling parameters of the target menu option list can be determined, for example, the initial speed, the scrolling time length, the scrolling distance and the like of the scrolling starting time are determined.

S204, judging whether the dragging time length is smaller than a first preset threshold value and whether the dragging displacement is larger than a second preset threshold value. When the drag duration is less than the first preset threshold and the drag displacement is greater than the second preset threshold, step S205 is executed.

In the embodiment of the invention, the triggering of the inertial scrolling is conditional, the starting of the inertial scrolling needs enough momentum, and the inertial scrolling can be generated when the dragging displacement of a user dragging the target menu option list in the vertical direction of the visible area of the list is enough (larger than a second preset threshold value) and the duration of the dragging is short enough (smaller than the first preset threshold value). When the user scrolls the list of menu options a small distance at a very slow speed, the momentum of the menu options is very small and does not trigger an inertial scroll.

S205, determining a first scroll amount of the target menu option list according to the dragging displacement, the dragging duration and a preset scroll coefficient.

In the embodiment of the invention, according to the dragging displacement, the dragging duration and the preset rolling coefficient, the rolling amount of the target menu option list in the vertical direction of the visible area of the list is determined, and the rolling amount of the target menu option list in the vertical direction of the visible area of the list is determined as the first rolling amount of the target menu option list.

S206, determining a second scrolling amount of the target menu option list according to the first scrolling amount of the target menu option list, wherein the second scrolling amount is the scrolling amount of the target menu option list on a preset visual arc.

In the embodiment of the present invention, for other detailed descriptions of step S206, please refer to the detailed descriptions of step S104 in the first embodiment, and the detailed descriptions of the embodiment of the present invention are omitted.

S207, determining the scrolling speed at the scrolling start time according to the dragging displacement and the dragging duration.

In the embodiment of the invention, based on the acceleration motion operation rule, the initial scrolling speed of the target menu option list at the scrolling starting time can be determined according to the dragging displacement and the dragging duration.

S208, determining the scrolling time of the list scrolling according to the scrolling speed at the scrolling start time and the first scrolling quantity of the target menu option list.

In the embodiment of the invention, the rolling time of the list rolling can be obtained based on the rolling speed at the rolling starting time and the rolling quantity of the target menu option list in the vertical direction of the visible area of the list and the operation rule of the deceleration movement.

S209, determining a rolling ending time according to the rolling starting time and the rolling time of list rolling.

In the embodiment of the present invention, the scroll end time may be determined according to the scroll duration of the list scroll and the scroll start time obtained in step S209.

S210, determining all second menu options with the scrolling end time in the visible area of the list according to the second scrolling amount of the target menu option list, wherein the second menu options are menu options in the target menu option list.

S211, determining the end position of each second menu option on the preset visual arc in the list visual area.

In the embodiment of the present invention, for other detailed descriptions of the steps S210-S211, please refer to the detailed descriptions of the steps S105-S106 in the first embodiment, and the detailed descriptions of the embodiments of the present invention are omitted.

S212, determining the position of each first menu option and/or each second menu option at each moment in the scrolling time according to a preset inching function and the scrolling time.

In the embodiment of the invention, in the inertial rolling stage, under the condition of the same time interval, the difference value between the displacement moving in two adjacent time intervals is smaller and smaller, and the slow-motion function of the inertial rolling can be determined, and the slow-motion function is an exemplary Bezier curve function. According to the preset slow function and the rolling time of the list rolling, the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling on the preset visual arc in the visible area of the list can be obtained.

S213, inertia scrolling the target menu option list.

In the embodiment of the invention, specifically, according to the initial position of each first menu option on the preset visual arc in the list visual area and the end position of each second menu option on the preset visual arc in the list visual area, and the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling, the target menu option list is rolled by inertia, so that all second menu options are displayed in the list visual area, and each second menu option is positioned at the end position of the second menu option on the preset visual arc in the list visual area.

Therefore, by implementing the implementation method of the annular rolling list shown in fig. 2, inertial rolling can be triggered according to user operation, display objects at each rolling moment can be determined, and rolling of the annular rolling list with an inertial effect can be realized, so that the interaction efficiency of a user can be improved, and the interaction experience of the user can be improved.

Example III

Referring to fig. 3, fig. 3 is a schematic structural diagram of a device for implementing a circular scrolling list according to an embodiment of the present invention. As shown in fig. 3, the implementation apparatus for the annular scrolling list includes: a first location module 301, a first determination module 302, a second determination module 303, a second location module 304, a scrolling module 305.

The first position module 301 is configured to obtain all first menu options with a scrolling start time within a visible area of the list, where the first menu options are menu options in the target menu option list; an initial position of each first menu option on a preset visual arc in the list visual area is determined.

In the embodiment of the invention, menu options in the target menu option list are displayed in a list visual area, and the list visual area comprises a preset visual arc. The preset visual circular arc of the list visual area is exemplified to be a semicircle, and each menu option is placed around the center of a standard circle corresponding to the preset visual circular arc. And taking the current moment as the scrolling starting moment, acquiring all menu options in the list visible area in the current target menu option list, and obtaining a plurality of first menu options. After determining the plurality of first menu options, the position coordinates of each first menu option can be determined. The initial coordinates of each menu option can be calculated by a trigonometric function according to the position of the center of a standard circle corresponding to the preset visual arc, the radius of the standard circle and the initial radian angle between each menu option and the coordinate axis of the vertical direction of the standard circle.

The first determining module 302 is configured to determine, based on a preset inertia plug-in, a first scroll amount of the target menu option list, where the first scroll amount is a scroll amount generated when the user drags the target menu option list.

The second determining module 303 is configured to determine a second scroll amount of the target menu option list according to the first scroll amount of the target menu option list, where the second scroll amount is a scroll amount of the target menu option list on a preset visual arc.

And the second position module 304 is configured to determine, according to the second scroll amount of the target menu option list, all second menu options whose scroll end time is in the visible area of the list, and determine an end position of each second menu option on a preset visible arc in the visible area of the list, where the second menu option is a menu option in the target menu option list.

In the embodiment of the invention, after the second scrolling amount of the target menu option list is determined, all menu options in the visible area of the list in the target menu option list can be determined when the scrolling is finished, so that a plurality of second menu options are obtained. After determining the plurality of second menu options, the position coordinates of each second menu option may be further determined.

A scrolling module 305, configured to, based on the initial position of each first menu option in the first position module 301 on the preset visual arc in the list visual area and the end position of each second menu option in the second position module 304 on the preset visual arc in the list visual area, inertial scroll the target menu option list so that all the second menu options are displayed in the list visual area, and each second menu option is located at the end position of the second menu option on the preset visual arc in the list visual area.

Therefore, by implementing the implementation method of the annular scrolling list shown in fig. 3, the scrolling of the annular scrolling list with inertia effect and natural and comfortable interaction can be realized on the APP, which is beneficial to improving the interaction efficiency of the user and further improving the interaction experience of the user.

In an embodiment of the present invention, optionally, referring to fig. 4, fig. 4 is a schematic structural diagram of an implementation apparatus of a ring scrolling list disclosed in the embodiment of the present invention, where the first determining module 302 includes:

the acquiring submodule 3021 is configured to acquire, based on a preset inertia plug-in, a drag displacement of a user dragging the target menu option list in a vertical direction of the visible area of the list, and a drag duration of the user dragging the target menu option list.

The determining submodule 3022 is configured to determine, according to the drag displacement, the drag duration, and the preset scroll coefficient, a scroll amount of the target menu option list in a vertical direction of the list visual area, and determine, as a first scroll amount of the target menu option list, the scroll amount of the target menu option list in the vertical direction of the list visual area.

As an alternative embodiment, in the second aspect of the present invention, the first determining module 302 further includes:

the judging submodule 3023 is configured to obtain, based on the preset inertia plug-in, a drag displacement of the user dragging the target menu option list in the vertical direction of the visible area of the list, and after a drag time of the user dragging the target menu option list, judge whether the drag time of the user dragging the target menu option list is less than a first preset threshold, and whether the drag displacement of the user dragging the target menu option list in the vertical direction of the visible area of the list is greater than a second preset threshold.

The determining submodule 3022 is further configured to perform an operation of determining, when the determining submodule 3023 determines that the drag duration of the user dragging the target menu option list is less than the first preset threshold and the drag displacement of the user dragging the target menu option list in the vertical direction of the list visual area is greater than the second preset threshold, a scroll amount of the target menu option list in the vertical direction of the list visual area according to the drag displacement, the drag duration and the preset scroll coefficient, and determining the scroll amount of the target menu option list in the vertical direction of the list visual area as the first scroll amount of the target menu option list.

In an embodiment of the present invention, optionally, referring to fig. 5, fig. 5 is a schematic structural diagram of a device for implementing a ring rolling list according to another embodiment of the present invention, where the device for implementing a ring rolling list further includes: the content height determination module 306.

A content height determining module 306, configured to obtain a first content height of a preset visual arc in the visible area of the list before the second determining module 303 determines a second scroll amount of the target menu option list according to the first scroll amount of the target menu option list, where the first content height of the preset visual arc is a sum of content heights of a plurality of menu options accommodated in the preset visual arc; determining a standard circle corresponding to a preset visual arc in a list visual area; and determining the second content height of the standard circle according to the first content height of the preset visual circular arc.

contentSize＝CGSize(width:0,height:size1)*CGFloat((Option.count))

In an alternative embodiment of the present invention, the second determining module 303 determines, according to the first scroll amount of the target menu option list, the second scroll amount of the target menu option list by:

progress＝offsetY/oneRoundContentHeight

In an alternative embodiment of the present invention, the second location module 304 determines, according to the second scroll amount of the target menu option list, all second menu options whose scroll end time is in the visible area of the list, including:

In an alternative embodiment of the present invention, the manner in which the second position module 304 determines the ending position of each second menu option on the preset visual arc in the list visual area includes:

In an embodiment of the present invention, optionally, referring to fig. 5, the apparatus further includes: the end time determination module 307.

The end time determining module 307 is configured to determine, at the second location module 304, a scrolling speed at a scrolling start time according to a dragging displacement of the user dragging the target menu option list in a vertical direction of the list visible area and a dragging duration of the user dragging the target menu option list before determining, according to a second scroll amount of the target menu option list, that the scrolling end time is in the list visible area; determining the rolling time of list rolling according to the rolling speed of the rolling starting time and the rolling quantity of the target menu option list in the vertical direction of the visible area of the list; and determining the rolling ending time according to the rolling starting time and the rolling time of list rolling.

In the embodiment of the invention, based on the acceleration motion operation rule, the initial scrolling speed of the target menu option list at the scrolling starting time can be determined according to the dragging displacement and the dragging duration. Based on the scrolling speed at the scrolling start time and the scrolling amount of the target menu option list in the vertical direction of the list visual area, the scrolling duration of the list scrolling can be obtained based on the operation rule of the deceleration motion. Further, according to the obtained rolling time length of the list rolling and the rolling starting time, the rolling ending time is determined.

As an alternative embodiment, in the second aspect of the present invention, the manner in which the scrolling module 305 scrolls the target menu item list by inertia according to the initial position of each first menu item on the preset visual arc in the list visual area and the end position of each second menu item on the preset visual arc in the list visual area so that all the second menu items are displayed in the list visual area and each second menu item is located at the end position of the second menu item on the preset visual arc in the list visual area includes:

according to a preset slow function and the rolling time length of the list rolling, determining the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time length of the list rolling on a preset visual arc in a visible area of the list;

And according to the initial position of each first menu option on the preset visual circular arc in the list visual area and the ending position of each second menu option on the preset visual circular arc in the list visual area, and the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling on the preset visual circular arc in the list visual area, the target menu option list is rolled by inertia so that all second menu options are displayed in the list visual area, and each second menu option is positioned at the ending position of the second menu option on the preset visual circular arc in the list visual area.

In the embodiment of the invention, in the inertial rolling stage, under the condition of the same time interval, the difference value between the displacement moving in two adjacent time intervals is smaller and smaller, and the slow-motion function of the inertial rolling can be determined, and the slow-motion function is an exemplary Bezier curve function. According to the preset slow function and the rolling time of the list rolling, the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling on the preset visual arc in the visible area of the list can be obtained. And according to the initial position of each first menu option on the preset visual circular arc in the list visual area and the ending position of each second menu option on the preset visual circular arc in the list visual area, and the corresponding position of each first menu option and/or second menu option in the target menu option list at each moment in the rolling time of the list rolling on the preset visual circular arc in the list visual area, the target menu option list is rolled by inertia so that all second menu options are displayed in the list visual area, and each second menu option is positioned at the ending position of the second menu option on the preset visual circular arc in the list visual area.

Therefore, by implementing the implementation method of the annular rolling list shown in fig. 5, inertial rolling can be triggered according to user operation, display objects at each rolling moment can be determined, and rolling of the annular rolling list with inertial effects and natural and comfortable interaction can be realized, so that the interaction efficiency of users can be improved, and the interaction experience of the users can be improved.

Example IV

Referring to fig. 6, fig. 6 is a schematic structural diagram of a device for implementing a circular scrolling list according to an embodiment of the present invention. As shown in fig. 6, the implementation apparatus of the ring-shaped scrolling list may include:

a memory 601 in which executable program codes are stored;

a processor 602 coupled to the memory 601;

the processor 602 invokes executable program codes stored in the memory 601 to perform the steps in the method for implementing the annular scrolling list described in the first or second embodiment of the present invention.

Example five

The embodiment of the invention discloses a computer storage medium which stores computer instructions for executing the steps in the method for realizing the annular scrolling list described in the first embodiment or the second embodiment of the invention when the computer instructions are called.

Example six

An embodiment of the present invention discloses a computer program product comprising a non-transitory computer readable storage medium storing a computer program, and the computer program is operable to cause a computer to perform the steps in the method for implementing a circular scrolling list described in embodiment one or embodiment two.

The apparatus embodiments described above are merely illustrative, wherein the modules illustrated as separate components may or may not be physically separate, and the components shown as modules may or may not be physical, i.e., may be located in one place, or may be distributed over a plurality of network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art will understand and implement the present invention without undue burden.

From the above detailed description of the embodiments, it will be apparent to those skilled in the art that the embodiments may be implemented by means of software plus necessary general hardware platforms, or of course by means of hardware. Based on such understanding, the foregoing technical solutions may be embodied essentially or in part in the form of a software product that may be stored in a computer-readable storage medium including Read-Only Memory (ROM), random-access Memory (Random Access Memory, RAM), programmable Read-Only Memory (Programmable Read-Only Memory, PROM), erasable programmable Read-Only Memory (Erasable Programmable Read Only Memory, EPROM), one-time programmable Read-Only Memory (OTPROM), electrically erasable programmable Read-Only Memory (EEPROM), compact disc Read-Only Memory (Compact Disc Read-Only Memory, CD-ROM) or other optical disc Memory, magnetic disc Memory, tape Memory, or any other medium that can be used for computer-readable carrying or storing data.

Finally, it should be noted that: the implementation method and the implementation device of the annular rolling list disclosed by the embodiment of the invention are only disclosed as the preferred embodiment of the invention, and are only used for illustrating the technical scheme of the invention, but are not limited to the technical scheme; although the invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art will understand that; the technical scheme recorded in the various embodiments can be modified or part of technical features in the technical scheme can be replaced equivalently; such modifications and substitutions do not depart from the spirit and scope of the corresponding technical solutions.

Claims

1. A method for implementing a circular scrolling list, the method comprising:

According to the dragging displacement, the dragging duration and a preset rolling coefficient, determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list, and determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list as a first rolling quantity of the target menu option list, wherein the first rolling quantity is the rolling quantity generated when a user drags the target menu option list;

2. The method for implementing the annular scrolling list according to claim 1, wherein the method further comprises, based on a preset inertia plug-in, acquiring a dragging displacement of a user dragging the target menu option list in a vertical direction of the list visible area, and a dragging duration of the user dragging the target menu option list:

3. The method of claim 1, wherein the determining the second scroll amount of the target menu option list is preceded by determining the first scroll amount of the target menu option list, the method further comprising:

4. A method for implementing a circular scrolling list as claimed in claim 3, wherein said determining all second menu options whose scrolling end moments are in the viewable area of the list based on the second scroll amount of the target menu option list comprises:

5. The method according to claim 1, wherein the determining, according to the second scroll amount of the target menu option list, that the scroll end time is before all the second menu options in the list visual area, further comprises:

6. The method according to claim 5, wherein said inertially scrolling the target menu item list according to an initial position of each of the first menu items on a preset visual arc in the list visual area and an end position of each of the second menu items on a preset visual arc in the list visual area, so that all of the second menu items are displayed in the list visual area and each of the second menu items is located at an end position of the second menu item on a preset visual arc in the list visual area, comprising:

7. An apparatus for implementing a circular scrolling list, the apparatus comprising:

the first determining module is used for obtaining the dragging displacement of a user for dragging the target menu option list in the vertical direction of the visible area of the list and the dragging time length of the user for dragging the target menu option list based on a preset inertia plug-in, determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list according to the dragging displacement, the dragging time length and a preset rolling coefficient, and determining the rolling quantity of the target menu option list in the vertical direction of the visible area of the list as the first rolling quantity of the target menu option list, wherein the first rolling quantity is the rolling quantity generated by dragging the target menu option list by the user;

8. An apparatus for implementing a circular scrolling list, the apparatus comprising:

a memory storing executable program code;

a processor coupled to the memory;

the processor invokes the executable program code stored in the memory to perform the method of implementing the circular scrolling list of any of claims 1-6.

9. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein computer program instructions for executing the method of implementing a circular scrolling list as claimed in any of the claims 1-6 when said computer program instructions are called.