CN108388465B - Method and device for realizing dynamic deformation switch assembly and terminal - Google Patents
Method and device for realizing dynamic deformation switch assembly and terminal Download PDFInfo
- Publication number
- CN108388465B CN108388465B CN201810214718.9A CN201810214718A CN108388465B CN 108388465 B CN108388465 B CN 108388465B CN 201810214718 A CN201810214718 A CN 201810214718A CN 108388465 B CN108388465 B CN 108388465B
- Authority
- CN
- China
- Prior art keywords
- line
- change process
- coordinate
- graph
- switch assembly
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
Abstract
The invention provides a method for realizing a dynamic deformation switch component, which comprises the following steps: receiving an instruction of a user to trigger the switch assembly; responding to the instruction, and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; acquiring parameters for controlling the change of the graph; calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate; and generating a graph of the change process of the switch assembly according to the coordinate change process. The method for realizing the dynamic deformation switch component can generate the dynamic deformation switch component capable of realizing the function of opening or closing a certain application interface, improves the interactive design novelty of the software interface, and simultaneously can improve the interactive smoothness of a user, thereby leaving deep impression on the user, improving the use satisfaction of the application and effectively enhancing the stickiness of the user to the software.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method, a device and a terminal for realizing a dynamic deformation switch component.
Background
With the continuous development of computer technology, various application software comes out endlessly, and can meet the application requirements of users in different fields and different problems. However, because the existing application software is huge in quantity, various software interfaces and interaction modes thereof are designed identically, and users are prone to generating aesthetic fatigue and the using experience satisfaction degree of the application is low in the face of the uniform design.
In the prior art, in order to distinguish a software interface and an interaction mode of application software from other application software, a special interface interaction mode is often set in the application software to attract the attention of a user, but the interface interaction design of the application software is only for attracting the attention of the user, and often the interface interaction design of the application software cannot have novelty and practicability at the same time, cannot leave a deep impression on the user and improve the use satisfaction of the application, and the stickiness of the user to the application software is low.
Disclosure of Invention
In order to overcome the technical problems, in particular to the problems that the interactive design of the application software interface in the prior art cannot have novelty and practicability, cannot leave a deep impression on a user and cannot improve the use satisfaction of the application, the following technical scheme is proposed:
according to an aspect, an embodiment of the present invention provides a method for implementing a dynamically deformed switch assembly, including:
receiving an instruction of a user to trigger the switch assembly;
responding to the instruction, and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; acquiring parameters for controlling the change of the graph;
calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate;
and generating a graph of the change process of the switch assembly according to the coordinate change process.
Preferably, the instruction is an instruction for switching an open state to a closed state;
the current coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in an on state, and the change termination coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in an off state.
Further, when the switch component is in an open state, the graph comprises a first line, a second line and a third line; the first line, the second line and the third line are sequentially distributed at equal intervals and have the same longitudinal symmetry axis;
when the switch component is in a closed state, the graph comprises the first line and the third line; the first lines and the third lines are intersected to form an X shape.
Further, the calculating a coordinate change process of the graph according to the parameter, the current coordinate and the change termination coordinate includes:
acquiring characteristic information of the switch assembly according to the current coordinate and the change termination coordinate;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the first line according to the parameters and the characteristic information; calculating a vertical coordinate change process of the first line according to the rotation angle change process and the longitudinal displacement change process; calculating the horizontal coordinate change process of the first line according to the transverse displacement change process and the characteristic parameters;
calculating the length change process of the second line according to the parameters and the characteristic information; calculating the coordinate change process of the second line according to the length change process and the characteristic information;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the third line according to the parameters and the characteristic information; calculating the vertical coordinate change process of the third line according to the rotation angle change process and the longitudinal displacement change process; and calculating the horizontal coordinate change process of the third line according to the transverse displacement change process and the characteristic parameters.
Further, the feature information includes: total angle of rotation of the first line clockwise
The initial distance pH between the first line and the upper boundary of the layer, the initial distance pW and the final distance tW between the first line and the left boundary of the layer, and the length w of the first line;
the calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the first line according to the parameters and the characteristic information comprises:
according to the parameter and the total rotation angle
Calculating the change process of the rotation angle of the first line as
According to the parameter, the total rotation angle
Calculating the initial distance pH between the first line and the boundary on the layer where the first line is positioned, wherein the longitudinal displacement change process of the first line is
Calculating the change process of the transverse displacement of the first line as pW + (tW-pW) mRatio according to the parameters, the initial distance pW and the final distance tW of the first line and the left boundary of the layer where the first line is located;
the calculating the vertical coordinate change process of the first line according to the rotation angle change process and the longitudinal displacement change process comprises the following steps:
according to the change process of the rotation angle of the first line, the change process is
And the longitudinal displacement variation process
Performing relative displacement on the layer where the first line is located to obtain that the vertical coordinate change process of the first line is equal to 0;
the calculating the abscissa variation process of the first line according to the transverse displacement variation process and the characteristic parameters comprises:
calculating the horizontal coordinate change process of the left side point of the first line as pW + (tW-pW) mRatio and the horizontal coordinate change process of the right side point as pW + (tW-pW) mRatio + w according to the transverse displacement change process pW + (tW-pW) mRatio and the length w of the first line;
wherein the mRatio is the parameter.
Preferably, the feature information includes: a length w of the second line and a lateral width cW and a longitudinal width cH of the switch assembly;
calculating the length change process of the second line according to the parameters and the characteristic information; calculating the coordinate change process of the second line according to the length change process and the feature information, wherein the coordinate change process comprises the following steps:
calculating the length change process of the second line as w (1-mRatio) according to the parameter and the length w; calculating the left side point abscissa variation process of the second line as (cW-w (1-mRatio))/2, the right side point abscissa variation process as (cW-w (1-mRatio))/2+ w (1-mRatio), and the ordinate variation process of the second line as cH/2 according to the length variation process w (1-mRatio), the longitudinal width cW and the longitudinal width cH; wherein the mRatio is the parameter.
Preferably, the acquiring of the parameter for controlling the pattern variation includes:
parameters of the control pattern variation generated based on a preset interpolator and estimator are obtained.
Preferably, the acquiring of the parameter for controlling the pattern variation includes:
acquiring preset parameters corresponding to a preset timer;
and taking the preset parameters as the parameters for controlling the change of the graph.
Preferably, the generating the graph of the switch component variation process according to the coordinate variation process includes:
and according to the coordinate change process, adopting a canvas-drawline function to respectively generate a first line, a second line and a third line in the image layer where the first line is located, the image layer where the second line is located and the image layer where the third line is located, and superposing the image layers to generate the graph of the switch component change process.
Preferably, after generating the graph of the switching component variation process according to the coordinate variation process, the method further includes:
and displaying the generated graph of the switch component change process in an application interface.
Preferably, the instruction is an instruction for switching the closed state to the open state;
the current coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the closed state, and the change termination coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the open state;
when the switch component is in an open state, the graph comprises a first line, a second line and a third line; the first line, the second line and the third line are sequentially distributed at equal intervals and have the same longitudinal symmetry axis;
when the switch component is in a closed state, the graph comprises the first line and the third line; the first lines and the third lines are intersected to form an X shape.
According to another aspect, an embodiment of the present invention further provides an apparatus for implementing a dynamically deformed switch assembly, including:
the instruction receiving module is used for receiving an instruction of triggering the switch component by a user;
the data acquisition module is used for responding to the instruction and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; acquiring parameters for controlling the change of the graph;
the coordinate calculation module is used for calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate;
and the graph generating module is used for generating a graph of the switch component change process according to the coordinate change process.
Embodiments of the present invention also provide, in accordance with yet another aspect, a terminal, which includes one or more processors; a memory; one or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to: the implementation method of the dynamic deformation switch component is implemented.
Compared with the prior art, the invention has the following beneficial effects:
according to the method, the device and the terminal for realizing the dynamic deformation switch component, the dynamic deformation switch component capable of opening or closing a certain application interface function can be generated through a preset graph generation method, the user interaction smoothness can be improved while the software interface interaction design novelty is improved, further, a deep impression is given to a user, the application satisfaction degree is improved, and the stickiness of the user to software is effectively enhanced.
In addition, the implementation method, the implementation device and the implementation terminal of the dynamic deformation switch assembly provided by the invention can further control the gradual change progress of the dynamic deformation of the switch assembly by adjusting parameters for controlling the graph change of the switch assembly, and can further improve the smoothness of user interaction.
Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention.
Drawings
The foregoing and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
fig. 1 is a flowchart of a method for implementing a dynamically deformed switch assembly according to an embodiment of the present invention;
FIG. 2 is a diagram illustrating a dynamic deformation process of the switch assembly according to an embodiment of the present invention;
FIG. 3 is an analysis diagram of the dynamic deformation process of the first line of the graph in FIG. 2;
FIG. 4 is a diagram of the effect of the application interface when the switch assembly is in the open state;
FIG. 5 is an application interface effect diagram during dynamic deformation of the switch assembly;
FIG. 6 is a diagram of the effect of the application interface when the switch assembly is in the closed state;
fig. 7 is a schematic structural diagram of an implementation apparatus of a dynamic deformation switch component according to an embodiment of the present invention;
fig. 8 is a schematic structural diagram of a terminal according to an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative only and should not be construed as limiting the invention.
Example one
The embodiment of the invention provides a method for realizing a dynamic deformation switch component, which comprises the following steps of:
step S101: an instruction is received from a user to activate the switch assembly.
For this embodiment, the switch component is a dynamic deformation switch component capable of turning on or off an application software interface function, and the switch component has two target states in a dynamic deformation process, one is an on state, and the other is an off state. The instruction is used to trigger the switch assembly to switch from a current target state to another target state, for example, from an on state to an off state, or from an off state to an on state.
Step S102: responding to the instruction, and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; and acquiring parameters for controlling the change of the graph.
For this embodiment, the graph displayed by the switch component includes at least one element, and the coordinates of each element in the target state during the dynamic deformation process of the switch component are preset. The obtaining of the current coordinate and the change termination coordinate of the graph displayed by the switch assembly is specifically to obtain a preset coordinate of a corresponding target state of the graph displayed by the switch assembly and a preset coordinate of another target state.
For this embodiment, the parameter is used to control the change progress of the dynamic deformation of the switch component, and the parameter is preset with an initial value and an end value. In the dynamic deformation process of the switch component, the value of the parameter changes from an initial value to an end value, correspondingly, the graph of the switch component is dynamically deformed from the graph corresponding to one target state to the graph corresponding to another target state, and when the value of the parameter is equal to the initial value or the end value, the switch component is in a certain target state.
Step S103: and calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate.
For the embodiment, the coordinates of the graph can be calculated when the parameters are equal to the current values by the current coordinates, the change termination coordinates and the parameters for controlling the dynamic deformation change progress of the switch assembly. And calculating the coordinate change process of the graph in the dynamic deformation process of the switch component by acquiring each preset value of the parameter between the initial value and the end value.
Step S104: and generating a graph of the change process of the switch assembly according to the coordinate change process.
For this embodiment, the graph of the switch component change process is completed on a preset image drawing layer. Specifically, in a coordinate change process of each element included in the graph of the switch component, the element in the change process is respectively drawn and generated in a layer where each element is located, and each layer is overlaid to generate the graph in the change process of the switch component.
The method for realizing the dynamic deformation switch component can generate the dynamic deformation switch component capable of opening or closing a certain application interface function through a preset graph generation method, improves the interactive design novelty of a software interface, can improve the interactive smoothness of a user, further leaves a deep impression on the user, improves the use satisfaction of the application, and effectively enhances the stickiness of the user to the software.
Example two
For the embodiment, a specific example is shown to further describe in detail the implementation method of the dynamic deformation switch component in the present invention in combination with an actual application scenario. The graph of the dynamically deforming switch assembly in this embodiment may implement a gradual transition from left to right as shown in fig. 2.
For this embodiment, the instruction received in step S101 is an instruction to switch the on state to the off state. When the switch module is in an open state, the graph corresponds to the leftmost graph in fig. 2, the graph comprises three lines, namely a first line, a second line and a third line which are sequentially arranged from top to bottom, the first line, the second line and the third line are equally distributed at equal intervals in sequence, and the three lines have the same longitudinal symmetry axis, namely the middle points of the first line, the second line and the third line are all on the same longitudinal line. When the switch assembly is in the closed state, the graph of the switch assembly corresponds to the graph on the rightmost side in the graph 2, the graph comprises two lines, the graph is formed by dynamically deforming the first line and the third line in the graph displayed when the switch assembly is in the open state, and the first line and the third line are intersected to form an X shape.
The invention, aiming at the concrete implementation of the above example, further comprises the following steps on the basis of the first embodiment, wherein,
the step S103 includes:
acquiring characteristic information of the switch assembly according to the current coordinate and the change termination coordinate;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the first line according to the parameters and the characteristic information; calculating a vertical coordinate change process of the first line according to the rotation angle change process and the longitudinal displacement change process; calculating the horizontal coordinate change process of the first line according to the transverse displacement change process and the characteristic parameters;
calculating the length change process of the second line according to the parameters and the characteristic information; calculating the coordinate change process of the second line according to the length change process and the characteristic information;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the third line according to the parameters and the characteristic information; calculating the vertical coordinate change process of the third line according to the rotation angle change process and the longitudinal displacement change process; and calculating the horizontal coordinate change process of the third line according to the transverse displacement change process and the characteristic parameters.
For this embodiment, the current coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in the on state, and the change termination coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in the off state.
For this embodiment, the feature information is used to calculate the coordinate change process of the first line, the second line, and the third line. The value of the characteristic information can be calculated according to the current coordinate and the change termination coordinate.
For this embodiment, the initial value of the parameter for controlling the dynamic deformation change progress of the switch assembly is preset to 0, and the end value is preset to 1. The parameters are floating point decimal parameters, and in the dynamic deformation process of the switch assembly, the values of the parameters are changed from 0 to 1. When the value of the parameter is 0, the switch component is in an open state; when the value of the parameter is 1, the switch component is in a closed state; and when the value of the parameter is more than 0 and less than 1, the switch component is in the process of dynamically deforming from the opening state to the closing state.
And when the value of the parameter is equal to 0 or 1, directly drawing and generating a graph of the corresponding state of the parameter according to the obtained current coordinate or the change termination coordinate.
When the value of the parameter is greater than 0 and less than 1 and is at the intermediate value, in this embodiment, the first line, the second line, and the third line included in the switch component are respectively generated by drawing on the layer where the first line, the second line, and the third line are located.
The method for calculating the coordinate change process of the first line in the dynamic deformation process of the switch assembly comprises the following steps:
in this embodiment, the feature information to be obtained for calculating the first line coordinate change process includes: a total angle of rotation of the first wire rotated clockwise; the initial distance between the first line and the boundary on the layer where the first line is located; the initial distance and the final distance between the first line and the left boundary of the layer where the first line is located; a length of the first line.
First, a rotation angle variation process of the first line rotating clockwise is calculated, assuming that the total rotation angle is
Degree, in combination with said parameter, then said rotation angle change process is
The mRatio is the parameter. Referring to fig. 3, when the switch assembly is in the on state, the distance between the first line and the upper boundary of the layer where the first line is located is a known pH, and if the canvas is not displaced, when the first line rotates to the total rotation angle
In degrees, the final value of the distance is
In fig. 3, a is a state corresponding to the first line when the switch assembly is in an on state, b is a state corresponding to the first line after rotation, and x is a final state corresponding to the rotation plus the moving canvas. The longitudinal displacement change process of the first line can be calculated as
Then, when the switch component is in an open state, the distance between the first line and the left boundary of the layer where the first line is located is known pW, and when the switch component is in a closed state, the distance between the first line and the left boundary of the layer where the first line is located is known tW, and then the transverse displacement process of the first line can be calculated to be pW + (tW-pW) mRatio. Obtaining the change process of the rotation angle of the layer where the first line is located at each gradual change moment
The upward translation distance change process of the layer is
And the course of the lateral displacement of the first line is pW + (tW-pW) mRatio. Finally, knowing that the length of the first line is w, the left-side coordinate change process of the first line is calculated to be (pW + (tW-pW) mRatio, 0), and the right-side coordinate change process is calculated to be (pW + (tW-pW) mRatio + w, 0).
It follows that the parameter and the total angle of rotation are dependent on
The change process of the rotation angle of the first line can be calculated as
According to the parameter, the total rotation angle
The initial distance pH between the first line and the boundary on the layer where the first line is located can be calculated to obtain the longitudinal displacement change process of the first line as
According to the parameters, the initial distance pW and the final distance tW of the first line and the left boundary of the layer where the first line is located, the transverse displacement change process of the first line can be calculated to be pW + (tW-pW) × m ratio; then, the rotation angle change process according to the first line is
And the longitudinal displacement variation process
After the layer where the first line is located is subjected to relative displacement, the vertical coordinate change process of the first line is equal to 0; finally, according to the transverse displacement change process pW + (tW-pW) mRatio and the length w of the first line, the change process of the abscissa of the left point of the first line can be calculated to be pW + (tW-pW) mRatio, and the change process of the abscissa of the right point of the first line can be calculated to be pW + (tW-pW) mRatio + w.
The method for calculating the coordinate change process of the second line in the dynamic deformation process of the switch assembly comprises the following steps:
in this embodiment, the feature information to be obtained for calculating the second line coordinate change process includes: the length w of the second line and the lateral and longitudinal widths of the switch assembly. Wherein the lateral width and the longitudinal width of the switch assembly are the total width of the displayed graphics when the switch assembly is in the open state.
The length of the second line is gradually shortened during the dynamic change of the switch assembly from the open state to the closed state. Given that the length of the second line is w and the lateral width of the switch assembly is cW when the switch assembly is in the open state, because the second line is in the center of the switch assembly, the length change process of the second line is w (1-mRatio), the mRatio is the parameter, the horizontal coordinate change process of the left side point of the second line is (cW-w (1-mRatio))/2, the horizontal coordinate change process of the right side point is (cW-w (1-mRatio))/2+ w (1-mRatio), and the vertical coordinate change process is constantly equal to cH/2.
Therefore, according to the parameter and the length w, the length change process of the second line can be calculated to be w (1-mRatio); according to the length change process w (1-mRatio), the longitudinal width cW and the longitudinal width cH, the left side point abscissa change process of the second line is calculated to be (cW-w (1-mRatio))/2, the right side point abscissa change process is calculated to be (cW-w (1-mRatio))/2+ w (1-mRatio), and the longitudinal coordinate change process of the second line is calculated to be cH/2.
For this embodiment, the difference between the coordinate change process of the third line and the coordinate change process of the first line is only that the direction of dynamic deformation of the lines is opposite, so the method for calculating the coordinate change process of the third line in the dynamic deformation process of the switch assembly is the same as the method for calculating the coordinate change process of the first line, and details are not repeated here.
After the coordinate change process of each line is calculated, the step S104 generates a graph of the change process of the switch assembly according to the coordinate change process, which specifically includes:
and according to the coordinate change process, adopting a canvas.
For this embodiment, the drawing generation of the first line, the second line, and the third line is completed based on a 2D image API preset in the terminal, and the canvas.
It is explicitly noted that in other embodiments, the graph of the dynamically deformed switch assembly may also implement a right-to-left fade process as shown in fig. 2. At this time, the instruction is an instruction for switching the closed state into the open state; the current coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the closed state, and the change termination coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the open state; when the switch component is in an open state, the graph comprises a first line, a second line and a third line; the first line, the second line and the third line are sequentially distributed at equal intervals and have the same longitudinal symmetry axis; when the switch component is in a closed state, the graph comprises the first line and the third line; the first lines and the third lines are intersected to form an X shape.
It should be explicitly noted that the graph of the dynamic deformation switch component is not limited to the graph shown in this embodiment, and it may also be that the calculation method of the coordinate change process in the dynamic deformation process is applicable to other graphs of the implementation method of the dynamic deformation switch component provided by the present invention, such as a graph including only the first line and the third line described in this embodiment, which is not limited in this embodiment.
In this embodiment, a specific example is shown to further explain the implementation method of the dynamically deformed switch component provided by the present invention in detail. The method can generate a dynamic deformation switch component capable of realizing the function of opening or closing an application interface through a preset graph generation method, the matching degree of the corresponding graph and the state information to be expressed is high when the switch component is in the opening state and the closing state, the switch component has obvious characteristics of expressing opening and closing, the switch component can realize the smooth transition of the graph between the opening state and the closing state in the scene of opening and closing the application interface by a user, the interactive design novelty of the software interface is improved, the interactive smoothness of the user can be improved, the user is further given a deep impression, the use satisfaction of the application is improved, and the stickiness of the user to the software is effectively enhanced.
EXAMPLE III
Another possible implementation manner of the embodiment of the present invention, on the basis of the first or second embodiment, further includes the step shown in the third embodiment, wherein,
the acquiring of the parameter of the control pattern change in step S102 includes: parameters of the control pattern variation generated based on a preset interpolator and estimator are obtained.
For this embodiment, the values of the parameters between the initial and end values may be generated based on interpolators and estimators in a preset property animation library. The attribute animation library is an animation library introduced by an Android development team in the 3.0 version, the interpolator is used for defining the change rate of the graph, and the estimator is used for calculating the numerical value of the parameter. The interpolator may be any linear interpolator or non-linear interpolator, such as uniform velocity, acceleration, deceleration, etc. The estimator is preset with integer type, floating point type and other types.
For example, when the initial value of the parameter is transitioned to the end value in the form of a floating-point type numerical value, the estimator usually employs a floating-point type estimator, and when the preset interpolator is a linear interpolator, each numerical value of the parameter between the initial value and the end value is calculated based on the linear interpolation and the floating-point type estimator, and then a dynamic deformation process for smoothly switching the pattern of the switch assembly from one target state to another target state at a constant speed can be obtained according to the parameter.
In this embodiment, the gradual change progress of the dynamic deformation of the switch assembly is controlled by adjusting the parameters for controlling the graph change of the switch assembly, so that the smoothness of user interaction can be further improved.
Example four
Another possible implementation manner of the embodiment of the present invention, on the basis of the first or second embodiment, further includes the step shown in the fourth embodiment, wherein,
the acquiring of the parameter of the control pattern change in step S102 includes:
acquiring preset parameters corresponding to a preset timer; and taking the preset parameters as the parameters for controlling the change of the graph.
For this embodiment, the value of the parameter is regularly changed by using a timer, specifically, the timer is used to obtain a preset parameter corresponding to a time node preset by the timer, the preset parameter is assigned to the parameter at the current time node, and finally, each value of the parameter transitioning from an initial value to an end value is obtained.
In this embodiment, the gradual change progress of the dynamic deformation of the switch assembly is controlled by adjusting the parameters for controlling the graph change of the switch assembly, so that the smoothness of user interaction can be further improved.
EXAMPLE five
Another possible implementation manner of the embodiment of the present invention, on the basis of the first or second embodiment, further includes the step shown in the fifth embodiment, wherein,
after the step S104, the method further includes:
and displaying the generated graph of the switch component change process in an application interface.
For the embodiment, in an application scene in which a user opens or closes an application interface, the switch component may implement dynamic deformation in the application page switching process, and switch from a current target state to another target state.
Specifically, referring to the dynamic deformation effect diagrams of the switch component shown in the application interfaces of fig. 4 to 6, the present embodiment will be described in detail by taking the diagram of the switch component in the second embodiment as an example. As shown in fig. 4, when an application is in an application interface for opening a column, the switch component displayed in the application interface displays a corresponding graph in an open state; after the user wants to close the application interface of the current column and trigger the switch component, the application responds to the trigger instruction to switch the application interface, as shown in fig. 5, and the switch component also dynamically deforms along with the trigger instruction in the switching process of the application interface; as shown in fig. 6, when the application completes switching from the application interface of the previous column to the application interface containing all columns, the switch component also realizes smooth and gradual transition from the graph corresponding to the open state to the graph corresponding to the closed state.
In this embodiment, the dynamic deformation switch component generates a dynamic deformation switch component capable of turning on or off an application interface function through a preset graph generation method, the matching degree of a corresponding graph and an application interface where the corresponding graph is located is high when the switch component is in an on state and an off state, and the switch component has obvious characteristics of representing on and off.
In addition, an embodiment of the present invention provides an apparatus for implementing a dynamic deformation switch component, as shown in fig. 7, the apparatus includes:
an instruction receiving module 201, configured to receive an instruction for a user to trigger a switch assembly;
a data obtaining module 202, configured to obtain, in response to the instruction, a current coordinate and a change termination coordinate of the graph displayed by the switch assembly; acquiring parameters for controlling the change of the graph;
a coordinate calculation module 203, configured to calculate a coordinate change process of the graph according to the parameter, the current coordinate, and the change termination coordinate;
and the graph generating module 204 is used for generating a graph of the switch component change process according to the coordinate change process.
The device for realizing the dynamic deformation switch component can generate the dynamic deformation switch component capable of opening or closing a certain application interface function through a preset graph generation method, improves the interactive design novelty of a software interface, can improve the interactive smoothness of a user, further leaves a deep impression on the user, improves the use satisfaction of the application, and effectively enhances the stickiness of the user to the software. In addition, the device can further control the gradual change progress of the dynamic deformation of the switch assembly by adjusting the parameters for controlling the graph change of the switch assembly, and the user interaction smoothness can be further improved.
The implementation apparatus for the dynamic deformation switch component provided in the embodiment of the present invention can implement the method embodiment provided above, and for specific function implementation, reference is made to the description in the method embodiment, which is not repeated herein.
In addition, as shown in fig. 8, the terminal may include one or more processors 301, a memory 302, a WiFi (wireless fidelity) circuit 303, a RF (Radio Frequency) circuit 304, an audio circuit 305, a sensor 306, an output device 307, an input device 304, and a power supply 309, where the processor 301 is a control center of the terminal and is connected to the above portions by using various interfaces and lines. Those skilled in the art will appreciate that the terminal structure shown in fig. 8 is not intended to be limiting and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components.
The WiFi circuit 303 may provide wireless local area network or internet access for the user; which may include an antenna, a WiFi module, etc. RF circuitry 304 may receive and transmit information, or the reception and transmission of signals during a call; which may include an antenna, at least one amplifier, a tuner, one or more oscillators, couplers, duplexers, and so forth. The audio circuit 305 may convert the received audio data into an electrical signal to be transmitted to the speaker, or convert a sound signal collected by the microphone into audio data to be sent to the processor 301 for processing; which may be provided with a speaker, microphone, earphone interface, etc. The sensor 306 can be used for sensing external signals and sending the signals to the processor 301 for processing; which may include motion sensors, light sensors, etc. The output device 307 may be used to display various signals; the Display panel may be configured in the form of an LCD (Liquid Crystal Display), an OLED (Organic Light-Emitting Diode), and the like. The input device 304 may be used to input information such as numbers and characters; which may be physical keys, touch panels, etc. The power supply 309 can supply power to each part of the terminal and is logically connected with the processor 309 through a power management system; which may include one or more components of a dc or ac power source, a charging system, a power status indicator, etc. Memory 302 may be used to store software programs and modules; it may be a computer readable storage medium, specifically a hard disk, a flash memory, etc. The processor is a control center of the terminal, and performs various functions of the terminal and processes terminal data by operating or executing software programs and/or modules stored in the memory 302 and calling data stored in the memory 302.
As one embodiment, a terminal includes: one or more processors 301, a memory 302, one or more applications, wherein the one or more applications are stored in the memory 302 and configured to be executed by the one or more processors 301, the one or more programs configured to perform the implementation method of the dynamically deformable switch assembly as described in embodiments one through five above.
The terminal provided by the invention can generate the dynamic deformation switch component capable of realizing the function of opening or closing a certain application interface through the preset graph generation method, improves the interactive design novelty of the software interface and the interactive smoothness of the user, further leaves a deep impression on the user, improves the use satisfaction of the application and effectively enhances the stickiness of the user to the software. In addition, the terminal can further control the gradual change progress of the dynamic deformation of the switch assembly by adjusting parameters for controlling the graph change of the switch assembly, and the user interaction smoothness can be further improved.
The terminal provided by the embodiment of the present invention can implement the method embodiment provided above, and for specific function implementation, reference is made to the description in the method embodiment, which is not described herein again.
The foregoing is only a partial embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and decorations can be made without departing from the principle of the present invention, and these modifications and decorations should also be regarded as the protection scope of the present invention.
Claims (13)
1. A method for realizing a dynamic deformation switch component is characterized by comprising the following steps:
receiving an instruction of a user to trigger the switch assembly;
responding to the instruction, and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; acquiring a parameter for controlling the change of a graph, wherein the parameter is used for controlling the change progress of the dynamic deformation of the switch assembly, an initial value and an end value are preset in the parameter, the value of the parameter is changed from the initial value to the end value in the dynamic deformation process of the switch assembly, correspondingly, the graph of the switch assembly is dynamically deformed from the graph corresponding to one target state to the graph corresponding to another target state, and when the value of the parameter is equal to the initial value or the end value, the switch assembly is in a certain target state;
calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate;
and generating a graph of the change process of the switch assembly according to the coordinate change process.
2. A method of implementing a dynamically changing switch assembly as claimed in claim 1, wherein the command is a command to switch from an on state to an off state;
the current coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in an on state, and the change termination coordinate corresponds to a coordinate of a graph displayed when the switch assembly is in an off state.
3. A method of implementing a dynamically changing switch assembly as claimed in claim 2, wherein:
when the switch component is in an open state, the graph comprises a first line, a second line and a third line; the first line, the second line and the third line are sequentially distributed at equal intervals and have the same longitudinal symmetry axis;
when the switch component is in a closed state, the graph comprises the first line and the third line; the first lines and the third lines are intersected to form an X shape.
4. A method for implementing a dynamically changing switch assembly as recited in claim 3, wherein said computing a coordinate change process for a graphic based on said parameters, current coordinates, and change termination coordinates comprises:
acquiring characteristic information of the switch assembly according to the current coordinate and the change termination coordinate, wherein the characteristic information is used for calculating the coordinate change process of the first line, the second line and the third line, and the numerical value of the characteristic information can be calculated according to the current coordinate and the change termination coordinate;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the first line according to the parameters and the characteristic information; calculating a vertical coordinate change process of the first line according to the rotation angle change process and the longitudinal displacement change process; calculating the horizontal coordinate change process of the first line according to the transverse displacement change process and the characteristic parameters;
calculating the length change process of the second line according to the parameters and the characteristic information; calculating the coordinate change process of the second line according to the length change process and the characteristic information;
calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the third line according to the parameters and the characteristic information; calculating the vertical coordinate change process of the third line according to the rotation angle change process and the longitudinal displacement change process; and calculating the horizontal coordinate change process of the third line according to the transverse displacement change process and the characteristic parameters.
5. A method of implementing a dynamically changing switch assembly as recited in claim 4, wherein the characterizing information comprises: the first thread is clockwiseTotal angle of rotation
The initial distance pH between the first line and the upper boundary of the layer, the initial distance pW and the final distance tW between the first line and the left boundary of the layer, and the length w of the first line;
the calculating a rotation angle change process, a longitudinal displacement change process and a transverse displacement change process of the first line according to the parameters and the characteristic information comprises:
according to the parameter and the total rotation angle
Calculating the change process of the rotation angle of the first line as
According to the parameter, the total rotation angle
Calculating the initial distance pH between the first line and the boundary on the layer where the first line is positioned, wherein the longitudinal displacement change process of the first line is
Calculating the change process of the transverse displacement of the first line as pW + (tW-pW) mRatio according to the parameters, the initial distance pW and the final distance tW of the first line and the left boundary of the layer where the first line is located;
the calculating the vertical coordinate change process of the first line according to the rotation angle change process and the longitudinal displacement change process comprises the following steps:
according to the change process of the rotation angle of the first line, the change process is
And the longitudinal displacement variation process
Performing relative displacement on the layer where the first line is located to obtain that the vertical coordinate change process of the first line is equal to 0;
the calculating the abscissa variation process of the first line according to the transverse displacement variation process and the characteristic parameters comprises:
calculating the horizontal coordinate change process of the left side point of the first line as pW + (tW-pW) mRatio and the horizontal coordinate change process of the right side point as pW + (tW-pW) mRatio + w according to the transverse displacement change process pW + (tW-pW) mRatio and the length w of the first line;
wherein the mRatio is the parameter.
6. A method of implementing a dynamically changing switch assembly as recited in claim 4, wherein the characterizing information comprises: a length w of the second line and a lateral width cW and a longitudinal width cH of the switch assembly;
calculating the length change process of the second line according to the parameters and the characteristic information; calculating the coordinate change process of the second line according to the length change process and the feature information, wherein the coordinate change process comprises the following steps:
calculating the length change process of the second line as w (1-mRatio) according to the parameter and the length w; calculating the left side point abscissa variation process of the second line as (cW-w (1-mRatio))/2, the right side point abscissa variation process as (cW-w (1-mRatio))/2+ w (1-mRatio), and the ordinate variation process of the second line as cH/2 according to the length variation process w (1-mRatio), the longitudinal width cW and the longitudinal width cH; wherein the mRatio is the parameter.
7. A method for implementing a dynamically changing switch assembly as recited in claim 1, wherein said obtaining parameters that control a change in a pattern comprises:
parameters of the control pattern variation generated based on a preset interpolator and estimator are obtained.
8. A method for implementing a dynamically changing switch assembly as recited in claim 1, wherein said obtaining parameters that control a change in a pattern comprises:
acquiring preset parameters corresponding to a preset timer;
and taking the preset parameters as the parameters for controlling the change of the graph.
9. A method for implementing a dynamically changing switch assembly as recited in claim 3, wherein generating the graph of the change process of the switch assembly in accordance with the coordinate change process comprises:
and according to the coordinate change process, adopting a canvas-drawline function to respectively generate a first line, a second line and a third line in the image layer where the first line is located, the image layer where the second line is located and the image layer where the third line is located, and superposing the image layers to generate the graph of the switch component change process.
10. A method for implementing a dynamically deformable switch assembly as claimed in claim 1, wherein said generating a graph of said switch assembly change process from a coordinate change process further comprises:
and displaying the generated graph of the switch component change process in an application interface.
11. A method of implementing a dynamically changing switch assembly as claimed in claim 1, wherein the command is a command to switch from an off state to an on state;
the current coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the closed state, and the change termination coordinate corresponds to the coordinate of the graph displayed when the switch assembly is in the open state;
when the switch component is in an open state, the graph comprises a first line, a second line and a third line; the first line, the second line and the third line are sequentially distributed at equal intervals and have the same longitudinal symmetry axis;
when the switch component is in a closed state, the graph comprises the first line and the third line; the first lines and the third lines are intersected to form an X shape.
12. An implementation apparatus for a dynamically deformable switch assembly, comprising:
the instruction receiving module is used for receiving an instruction of triggering the switch component by a user;
the data acquisition module is used for responding to the instruction and acquiring the current coordinate and the change termination coordinate of the graph displayed by the switch assembly; acquiring parameters for controlling the change of the graph;
the coordinate calculation module is used for calculating the coordinate change process of the graph according to the parameters, the current coordinate and the change termination coordinate;
and the graph generating module is used for generating a graph of the switch component change process according to the coordinate change process.
13. A terminal, characterized in that it comprises:
one or more processors;
a memory;
one or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to: implementing method of carrying out a dynamically deforming switch assembly according to any one of claims 1 to 11.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810214718.9A CN108388465B (en) | 2018-03-15 | 2018-03-15 | Method and device for realizing dynamic deformation switch assembly and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810214718.9A CN108388465B (en) | 2018-03-15 | 2018-03-15 | Method and device for realizing dynamic deformation switch assembly and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108388465A CN108388465A (en) | 2018-08-10 |
| CN108388465B true CN108388465B (en) | 2021-04-23 |
Family
ID=63067830
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810214718.9A Active CN108388465B (en) | 2018-03-15 | 2018-03-15 | Method and device for realizing dynamic deformation switch assembly and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108388465B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110928622B (en) * | 2019-11-08 | 2023-11-14 | 北京金山安全软件有限公司 | Picture display state adjusting method and device and electronic equipment |
| CN113448579B (en) * | 2021-07-08 | 2024-04-09 | 京东科技控股股份有限公司 | Method and device for realizing side dynamic effect in visual interface |
| CN117170545A (en) * | 2022-06-10 | 2023-12-05 | 荣耀终端有限公司 | Display method of switch control and electronic equipment |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102163129A (en) * | 2011-04-26 | 2011-08-24 | 宇龙计算机通信科技(深圳)有限公司 | Method and device for implementing icon deformation |
| CN104238907A (en) * | 2013-06-20 | 2014-12-24 | 华为技术有限公司 | Interface display method and device and terminal equipment |
| US20150256593A1 (en) * | 2014-03-05 | 2015-09-10 | ShowKit, Inc. | Systems and methods for controlling a device via gestures received by a remote device |
| CN105825537A (en) * | 2015-11-30 | 2016-08-03 | 维沃移动通信有限公司 | Method for generating animation curve and terminal |
| CN106303652A (en) * | 2015-05-27 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The method for drafting of a kind of interface element and device |
| CN106325649A (en) * | 2015-06-19 | 2017-01-11 | 深圳创锐思科技有限公司 | 3d dynamic display method and mobile terminal |
| CN106325835A (en) * | 2015-06-19 | 2017-01-11 | 深圳创锐思科技有限公司 | A 3D application icon interaction method applied to a touch terminal and a touch terminal |
| CN106406678A (en) * | 2016-10-23 | 2017-02-15 | 惠州Tcl移动通信有限公司 | Method and system of displaying icon of mobile terminal dynamically |
| US20170053371A1 (en) * | 2012-05-04 | 2017-02-23 | Gt Gettaxi Limited | Searching and routing geographically-positioned entities via a graphical user interface |
| CN106843648A (en) * | 2017-01-12 | 2017-06-13 | 北京小度信息科技有限公司 | The control method by sliding of interface element, interface display method and device |
-
2018
- 2018-03-15 CN CN201810214718.9A patent/CN108388465B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102163129A (en) * | 2011-04-26 | 2011-08-24 | 宇龙计算机通信科技(深圳)有限公司 | Method and device for implementing icon deformation |
| US20170053371A1 (en) * | 2012-05-04 | 2017-02-23 | Gt Gettaxi Limited | Searching and routing geographically-positioned entities via a graphical user interface |
| CN104238907A (en) * | 2013-06-20 | 2014-12-24 | 华为技术有限公司 | Interface display method and device and terminal equipment |
| US20150256593A1 (en) * | 2014-03-05 | 2015-09-10 | ShowKit, Inc. | Systems and methods for controlling a device via gestures received by a remote device |
| CN106303652A (en) * | 2015-05-27 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The method for drafting of a kind of interface element and device |
| CN106325649A (en) * | 2015-06-19 | 2017-01-11 | 深圳创锐思科技有限公司 | 3d dynamic display method and mobile terminal |
| CN106325835A (en) * | 2015-06-19 | 2017-01-11 | 深圳创锐思科技有限公司 | A 3D application icon interaction method applied to a touch terminal and a touch terminal |
| CN105825537A (en) * | 2015-11-30 | 2016-08-03 | 维沃移动通信有限公司 | Method for generating animation curve and terminal |
| CN106406678A (en) * | 2016-10-23 | 2017-02-15 | 惠州Tcl移动通信有限公司 | Method and system of displaying icon of mobile terminal dynamically |
| CN106843648A (en) * | 2017-01-12 | 2017-06-13 | 北京小度信息科技有限公司 | The control method by sliding of interface element, interface display method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108388465A (en) | 2018-08-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3531230B1 (en) | Electronic device including flexible display and method for controlling same | |
| EP3588284B1 (en) | Method and device for layer drawing control, and mobile terminal | |
| CN108388465B (en) | Method and device for realizing dynamic deformation switch assembly and terminal | |
| US10606350B2 (en) | Deformable display device and image display method using same | |
| CN106325649B (en) | 3D dynamic display method and mobile terminal | |
| CN107256207B (en) | Apparatus and method for generating 3D object | |
| CN108769361B (en) | Control method of terminal wallpaper, terminal and computer-readable storage medium | |
| EP3373281B1 (en) | Method for controlling image display and terminal | |
| EP3396519A1 (en) | Terminal and display control method | |
| JP6258023B2 (en) | Enhanced dynamic haptic effect | |
| US9158431B2 (en) | Apparatus and method for manipulating the orientation of an object on a display device | |
| KR102304891B1 (en) | Method and system for generating mask overlay for display panel corresponding to touch path | |
| CN105488833A (en) | Method and apparatus for realizing 3D transition animation for 2D control | |
| CN110384924A (en) | The display control method of virtual objects, device, medium and equipment in scene of game | |
| US20080252661A1 (en) | Interface for Computer Controllers | |
| EP3015970A1 (en) | Method for simulating digital watercolor image and electronic device using the same | |
| CN111258693B (en) | Remote display method and device | |
| CN112700518A (en) | Method for generating trailing visual effect, method for generating video and electronic equipment | |
| CN110825242A (en) | Input method and device | |
| CN109598672B (en) | Map road rendering method and device | |
| CN104299460A (en) | Electronic apparatus for providing function of solid figure learning | |
| CN115129224B (en) | Mobile control method, device, storage medium and electronic equipment | |
| CN114797109A (en) | Object editing method and device, electronic equipment and storage medium | |
| CN113126867A (en) | Browser control method and device, browser, terminal and storage medium | |
| CN113407071A (en) | Display terminal and wallpaper control method thereof |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20200417 Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province Applicant after: Alibaba (China) Co.,Ltd. Address before: 510640 Guangdong city of Guangzhou province Whampoa Tianhe District Road No. 163 Xiping Yun Lu Yun Ping square B radio tower 15 layer self unit 02 Applicant before: GUANGZHOU UC NETWORK TECHNOLOGY Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |