CN111984166A - Annular rotation interaction method, device, equipment and medium for menu - Google Patents
Annular rotation interaction method, device, equipment and medium for menu Download PDFInfo
- Publication number
- CN111984166A CN111984166A CN202010650832.3A CN202010650832A CN111984166A CN 111984166 A CN111984166 A CN 111984166A CN 202010650832 A CN202010650832 A CN 202010650832A CN 111984166 A CN111984166 A CN 111984166A
- Authority
- CN
- China
- Prior art keywords
- menu
- rotation
- annular
- angle
- half ring
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 230000003993 interaction Effects 0.000 title claims abstract description 9
- 238000004590 computer program Methods 0.000 claims description 15
- 230000002452 interceptive effect Effects 0.000 claims description 11
- 238000003860 storage Methods 0.000 claims description 7
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 13
- 230000006870 function Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 6
- 230000008859 change Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000009826 distribution Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction 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/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a method, a device, equipment and a medium for annular rotation interaction of menus, wherein the method comprises the following steps: the menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, the annular menu is annularly distributed by N menu items, each menu item simultaneously rotates clockwise or anticlockwise according to a preset angle, and under the condition that any menu item is selected, content introduction information corresponding to the selected menu item is displayed in the information display area. The invention can dynamically display brief introduction information in each menu item through the rotation of the menu, further improve the utilization rate of the whole page, more intuitively display the function of the page corresponding to each menu item, and relieve aesthetic fatigue of people on the common list menu.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a medium for a menu.
Background
With the development of internet technology and information industry, data has penetrated into every industry and business intelligence field at present, and the big data era comes along, and the large screen of visual data also begins to be applied to various industries such as governments, hospitals, internet enterprises and the like. Most of the menus still adopt the form of traditional list menus, but in the big data era, more information can be introduced, and an observer can clearly know the content types of the menu items behind the menu items, which is already a necessary item for showing the large screen, and the ring menu is a good method for solving the problem, and the ring menu is a static ring menu alone, which is not too monotonous for a large screen for showing, so that animation is added to the menu to carry out dynamic interactive showing to become necessary.
Disclosure of Invention
The invention aims to provide a method, a device, equipment and a medium for annular rotation interaction of a menu, wherein the menu can dynamically display brief introduction information in each menu item in a rotation mode.
In a first aspect, the present invention provides a method for a circular rotation interaction of a menu, wherein a menu page is sequentially divided into a circular menu area and an information display area, the circular menu area is used for displaying a circular menu, the circular menu is annularly distributed by N menu items, each menu item simultaneously rotates clockwise or simultaneously counterclockwise in 2D according to a preset angle, and content introduction information corresponding to a selected menu item is displayed in the information display area under the condition that any menu item is selected.
In a second aspect, the present invention provides a circular rotation interactive device for menus, comprising:
the menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, and the annular menu is annularly distributed by N menu items;
the rotation control module is used for simultaneously clockwise or simultaneously anticlockwise rotating each menu item in the annular menu according to a preset angle in a 2D manner;
and the display control module displays the content introduction information corresponding to the selected menu item in the information display area under the condition that any menu item in the annular menu is selected.
In a third aspect, the present invention provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of the first aspect when executing the program.
In a fourth aspect, the invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the method of the first aspect.
The method, the device, the equipment and the medium provided by the embodiment of the invention at least have the following technical effects or advantages: compared with the prior art, the annular menu is used, the rotating animation elements are further added to the annular menu in an interactive mode on the basis of the annular menu, the picture is more flexible and more vital, the brief introduction content of the menu is displayed according to the selected menu items, dynamic display and change of data are added, the utilization rate of the whole page is further improved, the functions of the page corresponding to each menu item can be displayed more visually, and aesthetic fatigue of people to the common list menu can be relieved.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
The invention will be further described with reference to the following examples with reference to the accompanying drawings.
FIG. 1 is a schematic diagram of a menu page area distribution embodiment of the present invention;
FIG. 2 is a schematic diagram of another embodiment of a menu page area distribution according to the present invention;
FIG. 3 is a flow chart of a method according to one embodiment of the present invention;
FIG. 4 is a schematic structural diagram of an apparatus according to a second embodiment of the present invention;
fig. 5 is a schematic structural diagram of an electronic device according to a third embodiment of the invention;
fig. 6 is a schematic structural diagram of a medium according to a fourth embodiment of the present invention.
Detailed Description
The embodiment of the application provides a method, a device, equipment and a medium for annular rotation interaction of a menu, and the menu dynamically displays brief introduction information in each menu item in a rotation mode.
The technical scheme in the embodiment of the application has the following general idea: the menu page is divided into an annular menu area and an information display area, the menu items are displayed in the annular menu area by using a list, an annular rotating menu mode is formed by rotating the angle of each menu item, and the effect of dynamically rotating the menu is realized by defining a timer and dynamically modifying the rotating angle value of each menu item through a specific algorithm. The method has the advantages that the picture is more agile and more vital, the introduction content of the menu is displayed according to the selected menu item, the dynamic display and change of data are added, the utilization rate of the whole page is further improved, and the functions of the page corresponding to each menu item can be displayed more intuitively.
In implementation, the layout of the menu item page may be implemented in HTML (hypertext markup language), the rotation of each menu item may be implemented in CSS (cascading style sheet), and the timer may be implemented in Javascript (Web programming language).
Example one
As shown in fig. 1, a menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, the annular menu is annularly distributed by N menu items, each menu item simultaneously rotates clockwise or counterclockwise in 2D according to a preset angle, and under the condition that any menu item is selected, content introduction information corresponding to the selected menu item is displayed in the information display area.
As a specific implementation manner of this embodiment, N menu items are distributed in a ring shape by equally dividing 360 °, a 2D rotation of a menu item is defined by a rotate in a transform attribute of the CSS, where the preset angle is a rotation angle a, and a relationship between the rotation angle a and the number N of menu items is as shown in formula (1):
as another specific implementation manner of the embodiment, the N value is an even number, and in order to clearly distinguish the left menu item and the right menu item, an open angle K is respectively arranged above and below the annular menu to form a hollow shape, wherein K is more than or equal to 30 degrees and less than or equal to 90 degrees; the annular menu is divided into a left half ring and a right half ring, the information display area comprises a left display area and a right display area, the left display area and the right display area are respectively positioned at the left side and the right side of the annular menu area and are respectively used for displaying content introduction information corresponding to the selected menu items of the left half ring and the right half ring so as to be suitable for the screen setting with larger width.
The specific example is shown in fig. 2, the distances between the menu item of the left half ring and the menu item of the right half ring are larger, and a hollow shape is formed. The preset angle is divided into a special rotation angle S and a general rotation angle B, the special rotation angle S is a rotation angle when the menu items on both sides of the opening angle K jump from the left half ring to the right half ring or from the right half ring to the left half ring, and the general rotation angle B represents a rotation angle of the remaining menu items, then:
S＝B+K (3)；
and when N menu items rotate once, calculating the rotation angle values of the N menu items according to the current angle value, the special rotation angle S and the general rotation angle B, sequentially packaging the N menu items in an angle value array, transmitting the N menu items as parameters to a transform in a corresponding menu item CSS as a rotate attribute value, and generating a rotated annular menu according to the rotate attribute value.
Calculating the rotation angle of each menu item through the Javascript, storing the rotation angle into an angle value array, rendering the rotation angle on a page through traversal and circulation, and setting the rotation angle of each menu item, so that the annular menu with the upper part and the lower part hollowed out is manufactured.
For example: assuming that the opening angle K is 30 degrees, the number N of menus is 12, a general rotation angle B is 25, a special rotation angle S is 55, and a predetermined arbitrary menu item is an initial position, an angle value array is obtained after initialization: [25,50,105,130,155,180,205,230,285,310,335,360], wherein the rotation angles from position 50 degrees to 105 degrees and from position 230 degrees to 285 degrees belong to special rotation angles S in the menu items, the rest are general rotation angles B, the values in the angle value array are transmitted to the rotate attribute in the transform in each menu item CSS, so that a ring menu can be drawn after each rotation, and so on, and after 12 times of drawing, each menu item rotates by one circle.
The rotation angle value of each menu item needs to be changed when the annular menu is rotated, and the rotated angle values of the menu items are stored in the angle value array, so that the angle value change of the first menu item and the last menu item is only calculated before each rotation, and the rest menu items only need to be progressively changed into the angle value of the previous menu item.
Among them, as a more preferable implementation manner of this embodiment: in order to enhance the display effect, the annular menu can be automatically rotated, the rotation of the menu items is controlled by a timer, an ideal time interval is set by the timer to enable the menu to rotate at regular time, when one-time angular rotation is finished, corresponding content introduction information is displayed in the information display area according to the automatically selected menu items, and specific display information such as the displayed menu introduction content can be configured in a specified manner according to the menu content and data owned by a background interface.
Among them, as a more preferable implementation manner of this embodiment: one or two special positions can be set as default selected positions during rotation, namely when any menu item rotates to the default selected position, content introduction information corresponding to the menu item is displayed in the information display area, as shown in fig. 3, the uppermost position of the left half ring and the lowermost position of the right half ring of the default selected position, when any menu item rotates to the uppermost position of the left half ring, the corresponding content introduction information is displayed in the left display area, and when any menu item rotates to the lowermost position of the right half ring, the corresponding content introduction information is displayed in the right display area.
However, in the scenario controlled by the timer, when the user needs to click other tab pages to leave the current menu page including minimizing the current menu page (including minimizing the whole browser if the user is used in the browser), the timer still continues to execute (i.e. when the menu page is implemented by the browser, the document object model DOM is eliminated by the browser), so when the page is entered again, the rotation effect of the menu is accelerated to execute, and in order to solve the problem, the embodiment may continue to be optimized, that is: when the current menu page changes due to external operation, the monitor is used for judging whether the menu page leaves or enters, if so, the timer is cleared, and if so, the timer is restarted.
Referring to the above example again, the array of angle values of the ring menu drawn for the first time is [25,50,105,130,155,180,205,230,285,310,335,360], and if the ring menu is to be rotated, the angle value of each menu item of the ring menu is to be modified, and the ring menu is rotated, which means that each menu item will be rotated to the position of the previous menu item, and then the angle value required to be rotated by the last menu item is determined. The calculated array of angle values of the ring menu after the next rotation is 50,105,130,155,180,205,230,285,310,335,360,385. In summary, the calculation process of the array of angle values at each rotation can be summarized as follows:
a. deleting the leftmost angle value of the pre-rotation angle value array (e.g., 25 in the angle value array above);
b. judging whether the rightmost side of the rotation rear angle value array is an angle value added according to the special rotation angle (for example, in the angle value array after the rotation, the angle value added according to the special rotation angle comprises 285 and 385 values, at the moment, the rightmost side of the rotation rear angle value array is 385), if so, adding a special angle value S, otherwise, adding a general rotation angle value B;
c. and traversing the menu item list of the annular menu according to the rotation rear angle value array to rotate the rear angle value for each menu item.
In general, as shown in fig. 3, the method for rotating the ring menu as a whole is summarized as follows:
1. acquiring an angle value array of the initial state annular menu (for example, the foreground acquires the position information of each menu item from the rear end through ajax and stores the position information by using one angle value array such as menuList), and traversing the angle value array to generate the initial state annular menu;
2. before each rotation, calculating to obtain a position angle value array of the rotated menu item, transmitting a parameter form into a transform in a corresponding menu item CSS to be used as a rotate attribute value, and generating a rotated annular menu according to the rotate attribute value;
3. acquiring the ID of the currently selected menu item, and acquiring the description information of the menu from the background through the ID, and displaying the description information in the corresponding information display area;
5. the timer is started and is cleared or restarted according to the exit or entry of the menu page of the present invention.
Based on the same inventive concept, the application also provides a device corresponding to the method in the first embodiment, which is detailed in the second embodiment.
Example two
In this embodiment, a circular rotation interactive device for menus is provided, as shown in fig. 4, including:
the menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, and the annular menu is annularly distributed by N menu items;
the rotation control module is used for simultaneously clockwise or simultaneously anticlockwise rotating each menu item in the annular menu according to a preset angle in a 2D manner;
and the display control module displays the content introduction information corresponding to the selected menu item in the information display area under the condition that any menu item in the annular menu is selected.
As a specific implementation manner of this embodiment, N menu items in the ring menu area are distributed in a ring shape by equally dividing 360 °, a 2D rotation of the menu item is defined by a rotate in a transform attribute of the CSS, and if the preset angle is a rotation angle a, a relationship between the rotation angle a and the number N of menu items is as shown in formula (1):
as another specific implementation manner of this embodiment, the value N is an even number, so that the N menu items can be divided into two sets, i.e., a left menu item and a right menu item, and the information display area includes a left display area and a right display area, which are respectively located on the left side and the right side of the annular menu area, and are suitable for the screen with a larger width.
In order to clearly distinguish the left menu item from the right menu item, an open angle K is respectively arranged above and below the annular menu to form a hollow shape, and K is more than or equal to 30 degrees and less than or equal to 90 degrees; the annular menu is divided into a left half ring and a right half ring, and the specific example is as shown in fig. 2, the distances between the menu item of the left half ring and the menu item of the right half ring are larger, and a hollow shape is formed.
The preset angle is divided into a special rotation angle S and a general rotation angle B, the special rotation angle S is a rotation angle when the menu items on both sides of the opening angle K jump from the left half ring to the right half ring or from the right half ring to the left half ring, and the general rotation angle B represents a rotation angle of the remaining menu items, then:
S＝B+K (3)；
and when N menu items rotate once, calculating the rotation angle values of the N menu items according to the current angle value, the special rotation angle S and the general rotation angle B, sequentially packaging the N menu items in an angle value array, transmitting the N menu items as parameters to a transform in a corresponding menu item CSS as a rotate attribute value, and generating a rotated annular menu according to the rotate attribute value.
Calculating the rotation angle of each menu item through the Javascript, storing the rotation angle into an angle value array, rendering the rotation angle on a page through traversal and circulation, and setting the rotation angle of each menu item, so that the annular menu with the upper part and the lower part hollowed out is manufactured.
For example: assuming that the opening angle K is 30 degrees, the number N of menus is 12, a general rotation angle B is 25, a special rotation angle S is 55, and a predetermined arbitrary menu item is an initial position, an angle value array is obtained after initialization: [25,50,105,130,155,180,205,230,285,310,335,360], wherein the rotation angles from position 50 degrees to 105 degrees and from position 230 degrees to 285 degrees belong to special rotation angles S in the menu items, the rest are general rotation angles B, the values in the angle value array are transmitted to the rotate attribute in the transform in each menu item CSS, so that a ring menu can be drawn after each rotation, and so on, and after 12 times of drawing, each menu item rotates by one circle.
The rotation angle value of each menu item needs to be changed when the annular menu is rotated, and the rotated angle values of the menu items are stored in the angle value array, so that the angle value change of the first menu item and the last menu item is only calculated before each rotation, and the rest menu items only need to be progressively changed into the angle value of the previous menu item.
Among them, as a more preferable implementation manner of this embodiment: the circular rotation interactive device for the menu further comprises:
a timer for controlling a time interval of the menu item rotation;
and the monitor is used for judging whether the menu page leaves or enters when the current menu page changes due to external operation, clearing the timer if the menu page leaves, and restarting the timer if the menu page enters.
In order to enhance the display effect, the annular menu can be automatically rotated, the rotation of the menu items is controlled by a timer, an ideal time interval is set by the timer to enable the menu to rotate at regular time, when one-time angular rotation is finished, corresponding content introduction information is displayed in the information display area according to the automatically selected menu items, and specific display information such as the displayed menu introduction content can be configured in a specified manner according to the menu content and data owned by a background interface.
One or two special positions can be set as default selected positions during rotation, namely when any menu item rotates to the default selected position, content introduction information corresponding to the menu item is displayed in the information display area, as shown in fig. 3, the uppermost position of the left half ring and the lowermost position of the right half ring of the default selected position, when any menu item rotates to the uppermost position of the left half ring, the corresponding content introduction information is displayed in the left display area, and when any menu item rotates to the lowermost position of the right half ring, the corresponding content introduction information is displayed in the right display area.
However, in the scenario controlled by the timer, when the user needs to click another tab page to leave the current menu page, the timer will still continue to execute, so when the user enters the page again, the rotation effect of the menu will be accelerated to execute, and in order to solve this problem, the present embodiment may be continuously optimized, that is: when the current menu page changes due to external operation, the monitor is used for judging whether the menu page leaves or enters, if so, the timer is cleared, and if so, the timer is restarted.
Referring to the above example again, the array of angle values of the ring menu drawn for the first time is [25,50,105,130,155,180,205,230,285,310,335,360], and if the ring menu is to be rotated, the angle value of each menu item of the ring menu is to be modified, and the ring menu is rotated, which means that each menu item will be rotated to the position of the previous menu item, and then the angle value required to be rotated by the last menu item is determined. The calculated array of angle values of the ring menu after the next rotation is 50,105,130,155,180,205,230,285,310,335,360,385.
In summary, the calculation process of the rotation control module for the array of angle values at each rotation can be summarized as follows:
a. deleting the leftmost angle value of the pre-rotation angle value array (e.g., 25 in the angle value array above);
b. judging whether the rightmost side of the rotation rear angle value array is an angle value added according to the special rotation angle (for example, in the angle value array after the rotation, the angle value added according to the special rotation angle comprises 285 and 385 values, at the moment, the rightmost side of the rotation rear angle value array is 385), if so, adding a special angle value S, and otherwise, adding a general rotation angle value B;
c. and traversing the menu item list of the annular menu to obtain the angle value after rotation of each menu item according to the number of the angle values after rotation.
Since the apparatus described in the second embodiment of the present invention is an apparatus used for implementing the method of the first embodiment of the present invention, based on the method described in the first embodiment of the present invention, a person skilled in the art can understand the specific structure and the deformation of the apparatus, and thus the details are not described herein. All the devices adopted in the method of the first embodiment of the present invention belong to the protection scope of the present invention.
Based on the same inventive concept, the application provides an electronic device embodiment corresponding to the first embodiment, which is detailed in the third embodiment.
EXAMPLE III
The embodiment provides an electronic device, as shown in fig. 5, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, any one of the first embodiment modes may be implemented.
Since the electronic device described in this embodiment is a device used for implementing the method in the first embodiment of the present application, based on the method described in the first embodiment of the present application, a specific implementation of the electronic device in this embodiment and various variations thereof can be understood by those skilled in the art, and therefore, how to implement the method in the first embodiment of the present application by the electronic device is not described in detail herein. The equipment used by those skilled in the art to implement the methods in the embodiments of the present application is within the scope of the present application.
Based on the same inventive concept, the application provides a storage medium corresponding to the fourth embodiment, which is described in detail in the fourth embodiment.
Example four
The present embodiment provides a computer-readable storage medium, as shown in fig. 6, on which a computer program is stored, and when the computer program is executed by a processor, any one of the embodiments can be implemented.
Compared with the prior art, the method, the device, the system, the equipment and the medium provided by the embodiment of the application further add the rotated animation elements into the annular menu in an interactive manner on the basis of the annular menu, so that the picture becomes more agile and more vital, the introduction content of the menu is displayed according to the selected menu item, the dynamic display and the change of data are added, the utilization rate of the whole page is further improved, the functions of the page corresponding to each menu item can be displayed more intuitively, and the aesthetic fatigue of people on the common list menu can be relieved.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus or system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Although specific embodiments of the invention have been described above, it will be understood by those skilled in the art that the specific embodiments described are illustrative only and are not limiting upon the scope of the invention, and that equivalent modifications and variations can be made by those skilled in the art without departing from the spirit of the invention, which is to be limited only by the appended claims.
Claims (10)
1. A circular rotation interactive method for menus is characterized in that: the menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, the annular menu is annularly distributed by N menu items, each menu item simultaneously rotates clockwise or anticlockwise according to a preset angle, and under the condition that any menu item is selected, content introduction information corresponding to the selected menu item is displayed in the information display area.
2. A method of circular rotation menu interaction according to claim 1, wherein:
the N menu items are distributed in a ring shape in a mode of evenly dividing 360 degrees, the preset angle is a rotation angle A, and the relationship between the rotation angle A and the number N of the menu items is shown as a formula (1):
3. a method of circular rotation menu interaction according to claim 1, wherein: when N is an even number, an open angle K is respectively arranged above and below the annular menu, and K is more than or equal to 30 degrees and less than or equal to 90 degrees; dividing the annular menu into a left half ring and a right half ring, wherein each time the annular menu rotates once, the left half ring and the right half ring respectively have a selected menu item; the information display area comprises a left display area and a right display area, is respectively positioned at the left side and the right side of the annular menu area and is respectively used for displaying content introduction information corresponding to the selected menu items of the left half ring and the right half ring;
the preset angle is divided into a special rotation angle S and a general rotation angle B, the special rotation angle S is a rotation angle when the menu items on both sides of the opening angle K jump from the left half ring to the right half ring or from the right half ring to the left half ring, and the general rotation angle B represents a rotation angle of the remaining menu items, then:
S＝B+K (3)；
and calculating N menu item rotation rear angle values according to the special rotation angle S and the general rotation angle B, sequentially packaging the N menu item rotation rear angle values in an angle value array, transmitting the N menu item rotation rear angle values as parameters to a transform in a corresponding menu item CSS as a rotate attribute value, and generating a rotated annular menu according to the rotate attribute value.
4. A method of circular rotation menu interaction according to claim 3, wherein: the menu item rotation is controlled by a timer, an ideal time interval is set by the timer to enable the menu to rotate at regular time, and when one-time angle rotation is finished, the corresponding content introduction information is dynamically displayed in the information display area according to the automatically selected menu item;
when the current menu page changes due to external operation, the monitor judges whether the menu page leaves or enters, if so, the timer is cleared, and if so, the timer is restarted.
5. An annular rotation interactive device of a menu is characterized in that: the method comprises the following steps:
the menu page is sequentially divided into an annular menu area and an information display area, the annular menu area is used for displaying an annular menu, and the annular menu is annularly distributed by N menu items;
the rotation control module is used for simultaneously clockwise or simultaneously anticlockwise rotating each menu item in the annular menu according to a preset angle in a 2D manner;
and the display control module displays the content introduction information corresponding to the selected menu item in the information display area under the condition that any menu item in the annular menu is selected.
6. A circular rotating interactive device for menus, according to claim 5, characterized in that: the N menu items are distributed in a ring shape in a mode of evenly dividing 360 degrees, the preset angle is a rotation angle A, and the relationship between the rotation angle A and the number N of the menu items is shown as a formula (1):
7. a circular rotating interactive device for menus, according to claim 5, characterized in that: when N is an even number, an open angle K is respectively arranged above and below the annular menu, and K is more than or equal to 30 degrees and less than or equal to 90 degrees; dividing the annular menu into a left half ring and a right half ring, wherein each time the annular menu rotates once, the left half ring and the right half ring respectively have a selected menu item; the information display area comprises a left display area and a right display area, is respectively positioned at the left side and the right side of the annular menu area and is respectively used for displaying content introduction information corresponding to the selected menu items of the left half ring and the right half ring;
the rotation control module divides the preset angle into a special rotation angle S and a general rotation angle B, where the special rotation angle S is a rotation angle when the menu items on both sides of the opening angle K jump from the left half ring to the right half ring or jump from the right half ring to the left half ring, and the general rotation angle B represents a rotation angle of the remaining menu items, then:
S＝B+K (3)；
and calculating N menu item rotation rear angle values according to the special rotation angle S and the general rotation angle B, sequentially packaging the N menu item rotation rear angle values in an angle value array, transmitting the N menu item rotation rear angle values as parameters to a transform in a corresponding menu item CSS as a rotate attribute value, and generating a rotated annular menu according to the rotate attribute value.
8. A circular rotating interactive device for menus, according to claim 5, characterized in that: also comprises
A timer for controlling a time interval of the menu item rotation;
and the monitor is used for judging whether the menu page leaves or enters when the current menu page changes due to external operation, clearing the timer if the menu page leaves, and restarting the timer if the menu page enters.
9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein: the processor, when executing the program, implements the method of any of claims 1 to 4.
10. A computer-readable storage medium having stored thereon a computer program, characterized in that: the program when executed by a processor implementing the method of any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010650832.3A CN111984166A (en) | 2020-07-08 | 2020-07-08 | Annular rotation interaction method, device, equipment and medium for menu |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010650832.3A CN111984166A (en) | 2020-07-08 | 2020-07-08 | Annular rotation interaction method, device, equipment and medium for menu |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111984166A true CN111984166A (en) | 2020-11-24 |
Family
ID=73439165
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010650832.3A Pending CN111984166A (en) | 2020-07-08 | 2020-07-08 | Annular rotation interaction method, device, equipment and medium for menu |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111984166A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379816A (en) * | 2020-12-21 | 2021-02-19 | 文县新农人农业科技有限公司 | Agricultural product information display processing method and device and electronic equipment |
| WO2023000833A1 (en) * | 2021-07-20 | 2023-01-26 | 海信视像科技股份有限公司 | Display device and display method for display device |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101080068A (en) * | 2006-05-22 | 2007-11-28 | Lg电子株式会社 | Mobile terminal and menu display method thereof |
| CN101661369A (en) * | 2008-08-26 | 2010-03-03 | 阿尔派株式会社 | Menu display device and menu display method |
| CN103218110A (en) * | 2011-12-06 | 2013-07-24 | Lg电子株式会社 | Mobile terminal and fan-shaped icon arrangement method thereof |
| US20140043542A1 (en) * | 2012-08-08 | 2014-02-13 | Shenzhen Skyworth-RGB electronics Co. Ltd. | Method, apparatus and remote control for annular-selector based television interaction |
| CN104317487A (en) * | 2014-11-12 | 2015-01-28 | 北京国双科技有限公司 | Display method and display device of annular menu |
| CN104407782A (en) * | 2014-12-11 | 2015-03-11 | 张蜀军 | Menu display method |
| CN105739835A (en) * | 2014-12-29 | 2016-07-06 | 达索系统公司 | Setting a parameter |
-
2020
- 2020-07-08 CN CN202010650832.3A patent/CN111984166A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101080068A (en) * | 2006-05-22 | 2007-11-28 | Lg电子株式会社 | Mobile terminal and menu display method thereof |
| CN101661369A (en) * | 2008-08-26 | 2010-03-03 | 阿尔派株式会社 | Menu display device and menu display method |
| CN103218110A (en) * | 2011-12-06 | 2013-07-24 | Lg电子株式会社 | Mobile terminal and fan-shaped icon arrangement method thereof |
| US20140043542A1 (en) * | 2012-08-08 | 2014-02-13 | Shenzhen Skyworth-RGB electronics Co. Ltd. | Method, apparatus and remote control for annular-selector based television interaction |
| CN104317487A (en) * | 2014-11-12 | 2015-01-28 | 北京国双科技有限公司 | Display method and display device of annular menu |
| CN104407782A (en) * | 2014-12-11 | 2015-03-11 | 张蜀军 | Menu display method |
| CN105739835A (en) * | 2014-12-29 | 2016-07-06 | 达索系统公司 | Setting a parameter |
Non-Patent Citations (1)
| Title |
|---|
| JQUERY之家: "jQuery和CSS3旋转环状菜单特效", pages 1 - 3, Retrieved from the Internet <URL:http://www.htmleaf.com/jQuery/Menu-Navigation/201508012340.html> * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112379816A (en) * | 2020-12-21 | 2021-02-19 | 文县新农人农业科技有限公司 | Agricultural product information display processing method and device and electronic equipment |
| WO2023000833A1 (en) * | 2021-07-20 | 2023-01-26 | 海信视像科技股份有限公司 | Display device and display method for display device |
| US11962865B2 (en) | 2021-07-20 | 2024-04-16 | Hisense Visual Technology Co., Ltd. | Display apparatus and process method for display apparatus |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9329764B2 (en) | Overscroll visual effects | |
| US10216388B2 (en) | Graphical user interface window spacing mechanisms | |
| US9547525B1 (en) | Drag toolbar to enter tab switching interface | |
| US9146670B2 (en) | Progressively indicating new content in an application-selectable user interface | |
| US8933952B2 (en) | Pre-rendering new content for an application-selectable user interface | |
| US20160132201A1 (en) | Contextual tabs in mobile ribbons | |
| US8248428B2 (en) | Parallel computation of computationally expensive parameter changes | |
| US8832590B1 (en) | Dynamically modifying user interface elements | |
| US8775965B1 (en) | Immersive mode for a web browser | |
| US20130050249A1 (en) | Selective rendering of off-screen content | |
| US20130080910A1 (en) | Dynamic visualization of page element access rates in a web application | |
| US10078626B1 (en) | Automated layout testing of content | |
| WO2012045024A2 (en) | Manipulating graphical objects | |
| CN111984166A (en) | Annular rotation interaction method, device, equipment and medium for menu | |
| WO2014179377A1 (en) | Automatically manipulating visualized data based on interactivity | |
| US20150029197A1 (en) | Systems and Methods for Visually Creating and Editing Scrolling Actions | |
| US20150370439A1 (en) | Gpu-optimized scrolling systems and methods | |
| US20220398996A1 (en) | Customizable compact overlay window | |
| US10241651B2 (en) | Grid-based rendering of nodes and relationships between nodes | |
| CN106648623B (en) | Display method and device for characters in android system | |
| US9318078B2 (en) | Intelligent memory management system and method for visualization of information | |
| US11423193B1 (en) | Perspective piping for a human machine interface | |
| RU2638014C2 (en) | Method and computer device for creating simplified borders of graphic objects | |
| CN102110149A (en) | Method, device and system for realizing multi-picture rotation on webpage | |
| US11200071B2 (en) | Cognitive scrollbar |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |