CN108388465A - Implementation method, device and the terminal of dynamic deformation switch module - Google Patents
Implementation method, device and the terminal of dynamic deformation switch module Download PDFInfo
- Publication number
- CN108388465A CN108388465A CN201810214718.9A CN201810214718A CN108388465A CN 108388465 A CN108388465 A CN 108388465A CN 201810214718 A CN201810214718 A CN 201810214718A CN 108388465 A CN108388465 A CN 108388465A
- Authority
- CN
- China
- Prior art keywords
- lines
- switch module
- change procedure
- parameter
- coordinates
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
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 present invention provides a kind of implementation method of dynamic deformation switch module, and this method includes：Receive the instruction of user's trigger switch component；Described instruction is responded, the changing coordinates of figure shown by the switch module and variation terminating coordinates are obtained；Obtain the parameter of control pattern variation；According to the parameter, changing coordinates and variation terminating coordinates, the changes in coordinates process of figure is calculated；The figure of the switch module change procedure is generated according to changes in coordinates process.The implementation method of dynamic deformation switch module provided by the invention can generate the dynamic deformation switch module that can be achieved to open or close a certain application interface function, user can also be improved while improving software interface interaction design novelty interacts smoothness, and then the user satisfaction of application is made a profound impression and improved to user, effectively enhance viscosity of the user to software.
Description
Technical field
The present invention relates to field of computer technology, specifically, the present invention relates to a kind of realities of dynamic deformation switch module
Existing method, apparatus and terminal.
Background technology
With the continuous development of computer technology, various application software emerge one after another, disclosure satisfy that user different field,
Application demand in different problems.However, due to existing application software substantial amounts, all kinds of software interfaces and its interactive mode
Design is identical, faces machine-made design, user easy tos produce aestheticly tired and the usage experience satisfaction of application is relatively low.
In the prior art, past in order to which the software interface and its interactive mode that make application software distinguish over other application software
Toward can be provided in application software the interface alternation mode of special efficacy to attract user to pay close attention to, but it is limited in that, such
The interface alternation of application software designs to attract the attention of user, can not often have both novelty and practicability, can not
The user satisfaction of application is made a profound impression and improved to user, and user is relatively low to the viscosity of application software.
Invention content
To overcome the above technical problem, especially software interface interaction design can not have both novelty in the prior art
And practicability, the problem of can not making a profound impression to user and improve the user satisfaction of application, spy proposes following technical side
Case：
The embodiment of the present invention provides a kind of implementation method of dynamic deformation switch module according on one side, including：
Receive the instruction of user's trigger switch component；
Described instruction is responded, the changing coordinates of figure shown by the switch module and variation terminating coordinates are obtained；It obtains
The parameter of control pattern variation；
According to the parameter, changing coordinates and variation terminating coordinates, the changes in coordinates process of figure is calculated；
The figure of the switch module change procedure is generated according to changes in coordinates process.
Preferably, described instruction is in an open state the instruction that switching is in off state；
The changing coordinates correspond to the coordinate of the switch module shown figure in the open state, and the variation terminates
Coordinate pair answers the switch module to be closed the coordinate of shown figure.
Further, when the switch module in the open state, the figure include First Line item, the second lines and
Third lines；First lines, the second lines and third lines are sequentially equally spaced, and have same longitudinally asymmetric axis；
When the switch module is closed, the figure includes first lines and the third lines；
First lines and third lines intersection are in X-type.
Further, described according to the parameter, changing coordinates and variation terminating coordinates, calculate the changes in coordinates mistake of figure
Journey, including：
According to the changing coordinates and variation terminating coordinates, the characteristic information of the switch module is obtained；
According to the parameter and the characteristic information, rotation angle change procedure, the Zong Xiangwei of first lines are calculated
Move change procedure and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, calculate
The ordinate change procedure of first lines；According to the lateral displacement change procedure and the characteristic parameter, described in calculating
The abscissa change procedure of first lines；
According to the parameter and the characteristic information, the length change procedure of second lines is calculated；According to the length
Change procedure and the characteristic information are spent, the changes in coordinates process of second lines is calculated；
According to the parameter and the characteristic information, rotation angle change procedure, the Zong Xiangwei of the third lines are calculated
Move change procedure and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, calculate
The ordinate change procedure of the third lines；According to the lateral displacement change procedure and the characteristic parameter, described in calculating
The abscissa change procedure of third lines.
Further, the characteristic information includes：Total rotation angle that first lines rotate clockwiseDescribed first
The initial distance pH of lines and place figure layer coboundary, and the initial distance pW of place figure layer left margin, finally distance tW, and
The length w of first lines；
It is described according to the parameter and the characteristic information, calculate the rotation angle change procedure, vertical of first lines
To change in displacement process and lateral displacement change procedure, including：
According to the parameter and total rotation angleThe rotation angle change procedure for calculating first lines isAccording to the parameter, total rotation angleThe initial distance of first lines and place figure layer coboundary
PH, the length travel change procedure for calculating first lines areAccording to the parameter,
And the initial distance pW of first lines and place figure layer left margin, final distance tW, calculate first lines
Lateral displacement change procedure is pW+ (tW-pW) * mRatio；
It is described according to the rotation angle change procedure and length travel change procedure, calculate the vertical seat of first lines
Change procedure is marked, including：
It is according to the rotation angle change procedure of first linesChange with the length travel
ProcessFigure layer where first lines is done into relative displacement, obtains first lines
The ordinate change procedure is equal to 0；
It is described according to the lateral displacement change procedure and the characteristic parameter, the abscissa for calculating first lines becomes
Change process, including：
According to lateral displacement change procedure pW+ (tW-pW) the * mRatio and length w of first lines, calculate
The left-hand point abscissa change procedure of first lines is pW+ (tW-pW) * mRatio, and right-hand point abscissa change procedure is
pW+(tW-pW)*mRatio+w；
Wherein, the mRatio is the parameter.
Preferably, the characteristic information includes：The length w of the second lines and transverse width cW of the switch module
With longitudinally wide cH；
According to the parameter and the characteristic information, the length change procedure of second lines is calculated；According to the length
Change procedure and the characteristic information are spent, the changes in coordinates process of second lines is calculated, including：
According to the parameter and the length w, the length change procedure for calculating second lines is w* (1-
mRatio)；According to the length change procedure w* (1-mRatio), the longitudinally wide cW and the longitudinally wide cH, calculate
The left-hand point abscissa change procedure for going out second lines is (cW-w* (1-mRatio))/2, and right-hand point abscissa changed
Journey is (cW-w* (1-mRatio))/2+w* (1-mRatio), and the ordinate change procedure of second lines is cH/2；Wherein,
The mRatio is the parameter.
Preferably, the parameter for obtaining control pattern variation, including：
Obtain the parameter of the control pattern variation generated based on preset interpolation device and estimator.
Preferably, the parameter for obtaining control pattern variation, including：
Obtain preset parameter corresponding with preset timer；
The parameter that the preset parameter is changed as the control pattern.
Preferably, the figure that the switch module change procedure is generated according to changes in coordinates process, including：
According to the changes in coordinates process, using Canvas.drawLine functions in figure layer, where first lines
Figure layer where two lines and the figure layer where third lines generate the first lines, the second lines and third lines, Jiang Getu respectively
Stacking plus the figure for generating the switch module change procedure.
Preferably, after the figure that the switch module change procedure is generated according to changes in coordinates process, further include：
The figure of the switch module change procedure of generation is shown in application interface.
Preferably, described instruction is in off state the instruction that switching is in an open state；
The changing coordinates correspond to the coordinate that the switch module is closed shown figure, and the variation terminates
Coordinate pair answers the coordinate of the switch module shown figure in the open state；
When the switch module in the open state, the figure include First Line item, the second lines and third lines；
First lines, the second lines and third lines are sequentially equally spaced, and have same longitudinally asymmetric axis；
When the switch module is closed, the figure includes first lines and the third lines；
First lines and third lines intersection are in X-type.
The embodiment of the present invention additionally provides a kind of realization device of dynamic deformation switch module according on the other hand,
It includes：
Command reception module, the instruction for receiving user's trigger switch component；
Data acquisition module, for responding described instruction, obtain the changing coordinates of figure shown by the switch module and
Change terminating coordinates；Obtain the parameter of control pattern variation；
Coordinate calculation module, for according to the parameter, changing coordinates and variation terminating coordinates, the coordinate for calculating figure to become
Change process；
Graph generation module, the figure for generating the switch module change procedure according to changes in coordinates process.
The embodiment of the present invention additionally provides a kind of terminal according to another aspect, and the terminal includes one or more
Processor；Memory；One or more application program, wherein one or more of application programs are stored in the memory
In and be configured as being executed by one or more of processors, one or more of programs are configured to：It executes above-mentioned
The implementation method of dynamic deformation switch module.
Compared with prior art, the present invention having the advantages that：
Implementation method, device and the terminal of dynamic deformation switch module provided by the invention can pass through preset figure
Generation method generates the dynamic deformation switch module that can be achieved to open or close a certain application interface function, is improving software interface
User can also be improved while interaction design novelty and interacts smoothness, and then is made a profound impression to user and improved application
User satisfaction, effectively enhance viscosity of the user to software.
In addition, implementation method, device and the terminal of dynamic deformation switch module provided by the invention, can also by adjusting with
In the parameter of control switch module graphic change, and then the gradual change progress of the switch module dynamic deformation is controlled, it can be further
It improves user and interacts smoothness.
The additional aspect of the present invention and advantage will be set forth in part in the description, these will become from the following description
Obviously, or practice through the invention is recognized.
Description of the drawings
Above-mentioned and/or additional aspect and advantage of the invention will become from the following description of the accompanying drawings of embodiments
Obviously and it is readily appreciated that, wherein：
Fig. 1 is the method flow diagram of the implementation method of dynamic deformation switch module provided in an embodiment of the present invention；
Fig. 2 is the dynamic deformation process of the switch module figure provided in an embodiment of the present invention；
Fig. 3 is the dynamic deformation process analysis procedure analysis figure of the first lines of figure in Fig. 2；
Fig. 4 is the application interface design sketch of the switch module in the open state；
Fig. 5 is the application interface design sketch during the switch module dynamic deformation；
Fig. 6 is the application interface design sketch when switch module is closed；
Fig. 7 is the structural schematic diagram of the realization device of dynamic deformation switch module provided in an embodiment of the present invention；
Fig. 8 is the structural schematic diagram of terminal provided in an embodiment of the present invention.
Specific implementation mode
The embodiment of the present invention is described below in detail, examples of the embodiments are shown in the accompanying drawings, wherein from beginning to end
Same or similar label indicates same or similar element or element with the same or similar functions.Below with reference to attached
The embodiment of figure description is exemplary, and is only used for explaining the present invention, and is not construed as limiting the claims.
Embodiment one
An embodiment of the present invention provides a kind of implementation methods of dynamic deformation switch module, as shown in Figure 1, this method packet
It includes：
Step S101：Receive the instruction of user's trigger switch component.
For the present embodiment, the switch module is the dynamic that can be achieved to open or close a certain software interface function
Deformation switch module, the switch module have during dynamic deformation there are two dbjective state, and one is opening state, another
A is closed state.Described instruction is switched to another dbjective state, example for triggering the switch module from current goal state
Such as, it is in off state from opening state switching, or is in an open state from closed state switching.
Step S102：Described instruction is responded, the changing coordinates of figure shown by the switch module is obtained and variation terminates
Coordinate；Obtain the parameter of control pattern variation.
For the present embodiment, figure shown by the switch module includes at least one element, and each element is in the switch
The coordinate in the dbjective state is preset during component dynamic deformation.It is described to obtain the shown figure of the switch module
The changing coordinates and variation terminating coordinates of shape, specifically, obtaining figure shown by the switch module corresponds to the pre- of dbjective state
Set the pre-set co-ordinate of coordinate and another dbjective state.
For the present embodiment, the parameter is used to control the variation progress of the switch module dynamic deformation, the parameter
Preset initial value and end value.During the switch module dynamic deformation, the value of the parameter changed from initial value
Cross to end value, correspondingly, the figure of the switch module from the corresponding figure dynamic deformation of a dbjective state be another target
The corresponding figure of state, when the value of the parameter is equal to initial value or end value, the switch module is in a certain target-like
State.
Step S103：According to the parameter, changing coordinates and variation terminating coordinates, the changes in coordinates process of figure is calculated.
For the present embodiment, changed by changing coordinates, variation terminating coordinates and the control switch module dynamic deformation
The parameter of progress can calculate the coordinate of the figure when the parameter is equal to current value.By obtain it is preset described in
Each numerical value of the parameter between initial value and end value, can calculate the figure during the switch module dynamic deformation
Changes in coordinates process.
Step S104：The figure of the switch module change procedure is generated according to changes in coordinates process.
For the present embodiment, the figure of the switch module change procedure is completed in preset Image Rendering figure layer.Tool
Body, the changes in coordinates process for each element that the figure of the switch module includes, draws in the figure layer where each element respectively
The element in change procedure is generated, and each map overlay is generated into the figure in the switch module change procedure.
The implementation method of dynamic deformation switch module provided by the invention can be generated by preset image generation method
The dynamic deformation switch module that can be achieved to open or close a certain application interface function, it is novel improving software interface interaction design
Property while can also improve user interact smoothness, and then make a profound impression to user and improve application use satisfaction
Degree, effectively enhances viscosity of the user to software.
Embodiment two
Show a specific example with to the present invention above-mentioned dynamic deformation in conjunction with practical application scene the present embodiment
The implementation method of switch module is described in further details.The figure of dynamic deformation switch module in the present embodiment can be realized such as
Progressive formation from left to right shown in Fig. 2.
For the present embodiment, the described instruction received in the step S101 is in an open state switching and is in off state
Instruction.When the switch module in the open state, the figure of the leftmost side in figure corresponding diagram 2, the figure include three
Lines, are followed successively by the first lines, the second lines and third lines, first lines, the second lines and third from top to bottom
Lines are isometric and are sequentially equally spaced, and three lines have a same longitudinally asymmetric axis, i.e., described first lines, the second lines and the
The midpoint of three lines is on same vertical line.It is most right in figure corresponding diagram 2 when the switch module is closed
The figure of side, the figure include two lines item, described in the switch module in the open state shown figure
First lines and the third lines dynamic deformation form, and first lines and third lines intersection are in X-type.
The present invention is directed to the specific implementation of above-mentioned example, further includes following institute on the basis of shown in embodiment one
The step of showing, wherein
The step S103, including：
According to the changing coordinates and variation terminating coordinates, the characteristic information of the switch module is obtained；
According to the parameter and the characteristic information, rotation angle change procedure, the Zong Xiangwei of first lines are calculated
Move change procedure and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, calculate
The ordinate change procedure of first lines；According to the lateral displacement change procedure and the characteristic parameter, described in calculating
The abscissa change procedure of first lines；
According to the parameter and the characteristic information, the length change procedure of second lines is calculated；According to the length
Change procedure and the characteristic information are spent, the changes in coordinates process of second lines is calculated；
According to the parameter and the characteristic information, rotation angle change procedure, the Zong Xiangwei of the third lines are calculated
Move change procedure and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, calculate
The ordinate change procedure of the third lines；According to the lateral displacement change procedure and the characteristic parameter, described in calculating
The abscissa change procedure of third lines.
For the present embodiment, the changing coordinates correspond to the seat of the switch module shown figure in the open state
Mark, the variation terminating coordinates correspond to the coordinate that the switch module is closed shown figure.
For the present embodiment, the characteristic information is for calculating first lines, the second lines and third lines coordinate
Change procedure.The numerical value of the characteristic information can be calculated according to the changing coordinates and variation terminating coordinates.
For the present embodiment, the initial value for controlling the parameter that the switch module dynamic deformation changes progress is pre-
It is set to 0, end value is predisposed to 1.The parameter is floating-point decimal parameter, described during the switch module dynamic deformation
The value of parameter transits to 1 from 0 variation.When the value of the parameter is 0, the switch module is in the open state；The parameter
When value is 1, the switch module is closed；When the value of the parameter is more than 0 and is less than 1, the switch module is in
During opening state dynamic deformation to closed state.
When the value of the parameter is equal to 0 or 1, according to the changing coordinates of acquisition or variation terminating coordinates, directly paint
System generates the figure of the parameter corresponding states.
When the value of the parameter is more than 0 and less than 1, is in median, in the present embodiment, the switch module includes
First lines, the second lines and third lines draw in the figure layer where it generate respectively.
The changes in coordinates process computational methods of first lines are as follows during the switch module dynamic deformation：
In the present embodiment, the feature letter for calculating the first lines changes in coordinates process to be obtained
Breath, including：Total rotation angle that first lines rotate clockwise；First lines and place figure layer coboundary it is initial away from
From；The initial distance of first lines and place figure layer left margin, final distance；The length of first lines.
First, the rotation angle change procedure that first lines rotate clockwise is calculated, it is assumed that total rotation angle
It isDegree, in conjunction with the parameter, then the rotation angle change procedure is The mRatio is the ginseng
Number.Referring to Fig. 3, in the open state, first lines are the switch module at a distance from its place figure layer coboundary
Known pH, if that displacement is not carried out to painting canvas, when first lines rotate to total rotation angleWhen spending, it is described away from
From end value beA is the switch module first lines pair in the open state in Fig. 3
The state answered, b are corresponding state after first lines rotation, and x is corresponding end-state after rotation plus mobile painting canvas.Then
The length travel change procedure that first lines can be calculated isThen, described to open
Closing component, first lines are known pW at a distance from the figure layer left margin of place in the open state, when being closed
First lines are known tW at a distance from the figure layer left margin of place, then can calculate the lateral displacement mistake of first lines
Journey is pW+ (tW-pW) * mRatio.It obtains each of the above gradual change moment, the rotation angle variation of figure layer where first lines
Process isUp translation distance change procedure is the figure layerAnd
The lateral displacement change procedure of first lines is pW+ (tW-pW) * mRatio.Finally, it is known that the length of first lines
For w, then the left side changes in coordinates process that can calculate first lines is (pW+ (tW-pW) * mRatio, 0), right side coordinate
Change procedure is (pW+ (tW-pW) * mRatio+w, 0).
It follows that according to the parameter and total rotation angleThe rotation angle of first lines can be calculated
Change procedure isAccording to the parameter, total rotation angleFirst lines and place figure layer top
The initial distance pH on boundary, the length travel change procedure that can calculate first lines areAccording to the parameter and first lines and place figure layer left margin it is initial away from
From pW, finally distance tW, the lateral displacement change procedure that can calculate first lines are pW+ (tW-pW) * mRatio；With
Afterwards, it is according to the rotation angle change procedure of first linesWith the length travel change procedureAfter figure layer where first lines is done relative displacement, the First Line can be obtained
The ordinate change procedure of item is equal to 0；Finally, according to the lateral displacement change procedure pW+ of first lines
(tW-pW) * mRatio and length w, the left-hand point abscissa change procedure that can calculate first lines are pW+ (tW-pW) *
MRatio, right-hand point abscissa change procedure are pW+ (tW-pW) * mRatio+w.
The changes in coordinates process computational methods of second lines are as follows during the switch module dynamic deformation：
In the present embodiment, the feature letter for calculating the second lines changes in coordinates process to be obtained
Breath, including：The length w of second lines and the transverse width of the switch module and longitudinally wide.Wherein, the switching group
The transverse width of part and the longitudinally wide overall width for the switch module shown figure in the open state.
For the switch module during opening state dynamic deformation is in off state, the length of second lines is gradual
Shorten.The known switch module in the open state second lines length be w, the switch module it is laterally wide
Degree is cW, because second lines are in switch module center, the length change procedure of second lines is w* (1-
MRatio), the mRatio is the parameter, and the left-hand point abscissa change procedure of second lines is (cW-w* (1-
MRatio))/2, right-hand point abscissa change procedure is (cW-w* (1-mRatio))/2+w* (1-mRatio), ordinate variation
Process is constantly equal to cH/2.
It follows that according to the parameter and the length w, the length change procedure that can calculate second lines is
w*(1-mRatio)；According to the length change procedure w* (1-mRatio), the longitudinally wide cW and the longitudinally wide cH,
The left-hand point abscissa change procedure that second lines can be calculated is (cW-w* (1-mRatio))/2, right-hand point abscissa
Change procedure is (cW-w* (1-mRatio))/2+w* (1-mRatio), and the ordinate change procedure of second lines is cH/
2。
For the present embodiment, the changes in coordinates process of the third lines and the changes in coordinates process of first lines
The direction of lines dynamic deformation be only difference is that on the contrary, therefore third lines during the switch module dynamic deformation
Changes in coordinates process computational methods and the changes in coordinates process computational methods of above-mentioned first lines are identical, and details are not described herein again.
After calculating the changes in coordinates process of each lines, the step S104 is generated according to changes in coordinates process
The figure of the switch module change procedure, specifically includes：
According to the changes in coordinates process, using Canvas.drawLine functions in figure layer, where first lines
Figure layer where two lines and the figure layer where third lines generate the first lines, the second lines and third lines, Jiang Getu respectively
Stacking plus the figure row for generating the switch module change procedure.
For the present embodiment, the drafting of first lines, the second lines and third lines is generated based on preset in terminal
2D images API complete, the Canvas.drawLine functions, which are used to be drawn according to incoming coordinate, generates lines.
Need it is clear that, in other embodiments, the figure of the dynamic deformation switch module can also be achieved such as Fig. 2
Shown in progressive formation from right to left.At this point, described instruction is in off state the instruction that switching is in an open state；It is described current
Coordinate pair answers the switch module to be closed the coordinate of shown figure, and the variation terminating coordinates correspond to the switch
The coordinate of component shown figure in the open state；When the switch module in the open state, the figure includes the
One lines, the second lines and third lines；First lines, the second lines and third lines are sequentially equally spaced, and have
Same longitudinally asymmetric axis；When the switch module is closed, the figure includes first lines and described the
Three lines；First lines and third lines intersection are in X-type.
Need it is clear that, the figure of the dynamic deformation switch module is not limited to described shown in the present embodiment
Figure can also be that the computational methods of changes in coordinates process during its dynamic deformation are suitable for dynamic provided by the present invention
Other figures of deformation switch module implementation method, the figure of the first lines and third lines as described in only including the present embodiment
Deng the present embodiment does not limit this.
In the present embodiment, realization side of the specific example to dynamic deformation switch module provided by the invention is shown
Method is elaborated further.This method can be generated by preset image generation method and can be achieved to open or close a certain answer
With the dynamic deformation switch module of interface function, when the switch module is in the open state and closed state corresponding figure with
The status information matching degree to be indicated is high, and there is apparent expression to open and close feature, open and close and apply in user
In interface scenario, the switch module can carry out its figure and be seamlessly transitted between opening state and closed state, improve
User can also be improved while software interface interaction design novelty and interacts smoothness, and then is made a profound impression simultaneously to user
The user satisfaction for improving application, effectively enhances viscosity of the user to software.
Embodiment three
The alternatively possible realization method of the embodiment of the present invention on the basis of shown in embodiment one or two, further includes
Step shown in embodiment three, wherein
The parameter of acquisition control pattern variation in the step S102, including：It obtains based on preset interpolation device
The parameter of the control pattern variation generated with estimator.
For the present embodiment, numerical value of the parameter between initial value and end value can be based on preset attribute animation library
In interpolation device and estimator generate.Wherein, the attribute animation library is what Android development teams introduced in 3.0 versions
Animation library, the interpolation device are used to define the rate of change of figure, and the estimator is used to calculate the numerical value of the parameter.It is described
Interpolation device can be various linear interpolators or non-linear interpolation device, such as at the uniform velocity, accelerate, slow down.The estimator is preset
The types such as integer type, floating type.
For example, when the initial value of the parameter transits to end value in the form of floating type numerical value, the estimator is logical
Frequently with floating type estimator the linear interpolation and floating type valuation are based on when preset interpolation device is linear interpolator
Device calculates each numerical value of the parameter between initial value and end value, and the switch can be obtained further according to the parameter
The figure of component from a dbjective state at the uniform velocity to take over seamlessly to the dynamic deformation process of another dbjective state.
In the present embodiment, by adjusting the parameter for controlling switch module graphic change, and then the switch is controlled
The gradual change progress of component dynamic deformation interacts smoothness, it can be achieved that further increasing user.
Example IV
The alternatively possible realization method of the embodiment of the present invention on the basis of shown in embodiment one or two, further includes
Step shown in example IV, wherein
The parameter of acquisition control pattern variation in the step S102, including：
Obtain preset parameter corresponding with preset timer；The ginseng that the preset parameter is changed as the control pattern
Number.
For the present embodiment, by using timer, timing regularly changes the numerical value of the parameter, specifically, uses
Timer obtains corresponding with the preset sometime node of timer preset parameter, current time node will be described pre-
Set parameter and assign the parameter, finally obtain the parameter from initial value transit to end value between each numerical value.
In the present embodiment, by adjusting the parameter for controlling switch module graphic change, and then the switch is controlled
The gradual change progress of component dynamic deformation interacts smoothness, it can be achieved that further increasing user.
Embodiment five
The alternatively possible realization method of the embodiment of the present invention on the basis of shown in embodiment one or two, further includes
Step shown in embodiment five, wherein
After the step S104, further include：
The figure of the switch module change procedure of generation is shown in application interface.
For the present embodiment, in the application scenarios that user opens or closes application interface, the switch module can answer
With dynamic deformation is realized during page layout switch, another dbjective state is switched to from current goal state.
Specifically, referring to the switch module dynamic deformation design sketch of Fig. 4 to 6 being shown in application interface, with reality
It applies and the present embodiment is described in detail for the figure of switch module described in example two.As shown in figure 4, opening certain when applying to be in
When the application interface of one column, the switch module that is shown in the application interface is shown to be corresponded in the open state
Figure；It is intended to close the application interface of current column in user, after triggering the switch module, refer to using the triggering is responded
It enables and carries out application interface switching, as shown in figure 5, in application interface handoff procedure, the switch module is also therewith into Mobile state
Deformation；As shown in fig. 6, when application is completed to switch to the application interface comprising whole columns from the application interface of column before this,
The switch module is also achieved from the smooth gradual transition of the corresponding figure of opening state to the corresponding figure of closed state.
In the present embodiment, the dynamic deformation switch module is generated by preset image generation method can be achieved to open
Or the dynamic deformation switch module of a certain application interface function is closed, when the switch module is in the open state and closed state
Corresponding figure and the application interface matching degree where it are high, and there is apparent expression to open and close feature, are opened in user
In closing application interface scene, the switch module can carry out its figure in opening state in application interface handoff procedure
It is seamlessly transitted between closed state, it is suitable that user's interaction can also be improved while improving software interface interaction design novelty
Smooth property, and then the user satisfaction of application is made a profound impression and improved to user, effectively enhance viscosity of the user to software.
In addition, an embodiment of the present invention provides a kind of realization devices of dynamic deformation switch module, as shown in fig. 7, described
Device includes：
Command reception module 201, the instruction for receiving user's trigger switch component；
Data acquisition module 202 obtains the changing coordinates of figure shown by the switch module for responding described instruction
With variation terminating coordinates；Obtain the parameter of control pattern variation；
Coordinate calculation module 203, for according to the parameter, changing coordinates and variation terminating coordinates, calculating the seat of figure
Mark change procedure；
Graph generation module 204, the figure for generating the switch module change procedure according to changes in coordinates process.
The realization device of dynamic deformation switch module provided by the invention can be generated by preset image generation method
The dynamic deformation switch module that can be achieved to open or close a certain application interface function, it is novel improving software interface interaction design
Property while can also improve user interact smoothness, and then make a profound impression to user and improve application use satisfaction
Degree, effectively enhances viscosity of the user to software.In addition, the device can also be by adjusting for controlling switch module graphic change
Parameter, and then control the gradual change progress of the switch module dynamic deformation, can further improve user and interact smoothness.
The method that above-mentioned offer may be implemented in the realization device of dynamic deformation switch module provided in an embodiment of the present invention is real
Example is applied, concrete function realizes the explanation referred in embodiment of the method, and details are not described herein.
In addition, the embodiment of the present invention additionally provides a kind of terminal, as shown in figure 8, the terminal may include one or
More than one processor 301, further include memory 302, WiFi (wireless fidelity, Wireless Fidelity) circuit 303,
RF (Radio Frequency, radio frequency) circuit 304, voicefrequency circuit 305, sensor 306, output equipment 307, input equipment
304, power supply 309, processor 301 are the control centres of terminal, utilize various interfaces and the above each section of connection.This field
Technical staff is appreciated that the restriction of the not structure paired terminal of terminal structure shown in Fig. 8, may include than illustrate it is more or
Less component either combines certain components or different components arrangement.
WiFi circuitry 303 can provide WLAN or internet access to the user；It may include antenna, WiFi module
Deng.RF circuits 304 can receive and send messages, or signal sends and receivees in communication process；It may include antenna, at least one puts
Big device, tuner, one or more oscillators, coupler, duplexer etc..The audio data that voicefrequency circuit 305 can will receive
It is converted into electric signal, is transferred to loud speaker, also the voice signal that microphone is collected audio data can be converted to, issue processor
301 processing；Loud speaker, microphone, earphone interface etc. can be arranged in it.Sensor 306 can be used for incuding outer signals, and issue place
Device 301 is managed to handle；It may include motion sensor, optical sensor etc..Output equipment 307 can be used for showing various signals；It can
For using LCD (Liquid Crystal Display, liquid crystal display), OLED (Organic Light-Emitting
Diode, Organic Light Emitting Diode) etc. forms configure display panel.Input equipment 304 can be used for inputting the letters such as number and character
Breath；It can be physical button, touch panel etc..Power supply 309 can be that terminal each section is powered, and pass through power-supply management system and processing
309 logical connection of device；It may include one or more direct current or AC power, charging system, power supply status indicator
Equal components.Memory 302 can be used for storing software program and module；It can be computer readable storage medium, be specifically
Hard disk, flash memory etc..Processor is the control centre of terminal, by running or executing the software program being stored in memory 302
And/or module, and the data for being stored in memory 302 are called, execute terminal various functions, processing terminal data.
As one embodiment, terminal includes：One or more processors 301, memory 302, one or more application
Program, wherein one or more of application programs are stored in memory 302 and are configured as by one or more of
Processor 301 executes, and one or more of programs are configured to carry out the dynamic deformation described in above example one to five and open
Close the implementation method of component.
Terminal provided by the invention can be generated by preset image generation method and can be achieved to open or close a certain answer
With the dynamic deformation switch module of interface function, user can also be improved while improving software interface interaction design novelty
Interaction smoothness, and then the user satisfaction of application is made a profound impression and improved to user, user is effectively enhanced to software
Viscosity.In addition, the terminal can also be by adjusting the parameter for controlling switch module graphic change, and then opened described in control
The gradual change progress for closing component dynamic deformation can further improve user and interact smoothness.
The embodiment of the method for above-mentioned offer may be implemented in terminal provided in an embodiment of the present invention, and concrete function realization refers to
Explanation in embodiment of the method, details are not described herein.
The above is only some embodiments of the present invention, it is noted that for the ordinary skill people of the art
For member, various improvements and modifications may be made without departing from the principle of the present invention, these improvements and modifications are also answered
It is considered as protection scope of the present invention.
Claims (13)
1. a kind of implementation method of dynamic deformation switch module, which is characterized in that include the following steps：
Receive the instruction of user's trigger switch component；
Described instruction is responded, the changing coordinates of figure shown by the switch module and variation terminating coordinates are obtained；Obtain control
The parameter of graphic change；
According to the parameter, changing coordinates and variation terminating coordinates, the changes in coordinates process of figure is calculated；
The figure of the switch module change procedure is generated according to changes in coordinates process.
2. the implementation method of dynamic deformation switch module according to claim 1, which is characterized in that described instruction is to open
State switches the instruction being in off state；
The changing coordinates correspond to the coordinate of the switch module shown figure in the open state, the variation terminating coordinates
The corresponding switch module is closed the coordinate of shown figure.
3. the implementation method of dynamic deformation switch module according to claim 2, it is characterised in that：
When the switch module in the open state, the figure include First Line item, the second lines and third lines；It is described
First lines, the second lines and third lines are sequentially equally spaced, and have same longitudinally asymmetric axis；
When the switch module is closed, the figure includes first lines and the third lines；It is described
First lines and third lines intersection are in X-type.
4. the implementation method of dynamic deformation switch module according to claim 3, which is characterized in that described according to the ginseng
Number, changing coordinates and variation terminating coordinates, calculate the changes in coordinates process of figure, including：
According to the changing coordinates and variation terminating coordinates, the characteristic information of the switch module is obtained；
According to the parameter and the characteristic information, the rotation angle change procedure of first lines is calculated, length travel becomes
Change process and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, described in calculating
The ordinate change procedure of first lines；According to the lateral displacement change procedure and the characteristic parameter, described first is calculated
The abscissa change procedure of lines；
According to the parameter and the characteristic information, the length change procedure of second lines is calculated；Become according to the length
Change process and the characteristic information calculate the changes in coordinates process of second lines；
According to the parameter and the characteristic information, the rotation angle change procedure of the third lines is calculated, length travel becomes
Change process and lateral displacement change procedure；According to the rotation angle change procedure and length travel change procedure, described in calculating
The ordinate change procedure of third lines；According to the lateral displacement change procedure and the characteristic parameter, the third is calculated
The abscissa change procedure of lines.
5. the implementation method of dynamic deformation switch module according to claim 4, which is characterized in that the characteristic information packet
It includes：Total rotation angle that first lines rotate clockwiseThe initial distance of first lines and place figure layer coboundary
PH, with the initial distance pW of place figure layer left margin, the final length w of distance tW and first lines；
It is described according to the parameter and the characteristic information, calculate rotation angle change procedure, the Zong Xiangwei of first lines
Change procedure and lateral displacement change procedure are moved, including：
According to the parameter and total rotation angleThe rotation angle change procedure for calculating first lines isAccording to the parameter, total rotation angleThe initial distance of first lines and place figure layer coboundary
PH, the length travel change procedure for calculating first lines areAccording to the parameter,
And the initial distance pW of first lines and place figure layer left margin, final distance tW, calculate first lines
Lateral displacement change procedure is pW+ (tW-pW) * mRatio；
It is described according to the rotation angle change procedure and length travel change procedure, the ordinate for calculating first lines becomes
Change process, including：
It is according to the rotation angle change procedure of first linesWith the length travel change procedureFigure layer where first lines is done into relative displacement, obtains the described of first lines
Ordinate change procedure is equal to 0；
It is described according to the lateral displacement change procedure and the characteristic parameter, the abscissa for calculating first lines changed
Journey, including：
According to lateral displacement change procedure pW+ (tW-pW) the * mRatio and length w of first lines, calculate described
The left-hand point abscissa change procedure of first lines is pW+ (tW-pW) * mRatio, and right-hand point abscissa change procedure is pW+
(tW-pW)*mRatio+w；
Wherein, the mRatio is the parameter.
6. the implementation method of dynamic deformation switch module according to claim 4, which is characterized in that the characteristic information packet
It includes：The length w of the second lines and transverse width cW of the switch module and longitudinally wide cH；
According to the parameter and the characteristic information, the length change procedure of second lines is calculated；Become according to the length
Change process and the characteristic information calculate the changes in coordinates process of second lines, including：
According to the parameter and the length w, the length change procedure for calculating second lines is w* (1-mRatio)；Root
According to the length change procedure w* (1-mRatio), the longitudinally wide cW and the longitudinally wide cH, described second is calculated
The left-hand point abscissa change procedure of lines is (cW-w* (1-mRatio))/2, and right-hand point abscissa change procedure is (cW-w*
(1-mRatio))/2+w* (1-mRatio), the ordinate change procedure of second lines is cH/2；Wherein, the mRatio
For the parameter.
7. the implementation method of dynamic deformation switch module according to claim 1, which is characterized in that the acquisition control figure
The parameter of deformation, including：
Obtain the parameter of the control pattern variation generated based on preset interpolation device and estimator.
8. the implementation method of dynamic deformation switch module according to claim 1, which is characterized in that the acquisition control figure
The parameter of deformation, including：
Obtain preset parameter corresponding with preset timer；
The parameter that the preset parameter is changed as the control pattern.
9. the implementation method of dynamic deformation switch module according to claim 3, which is characterized in that described to be become according to coordinate
Change process generates the figure of the switch module change procedure, including：
According to the changes in coordinates process, using Canvas.drawLine functions in figure layer, the second line where first lines
Figure layer where item and the figure layer where third lines generate the first lines, the second lines and third lines respectively, and each figure layer is folded
Add the figure for generating the switch module change procedure.
10. the implementation method of dynamic deformation switch module according to claim 1, which is characterized in that described according to coordinate
After change procedure generates the figure of the switch module change procedure, further include：
The figure of the switch module change procedure of generation is shown in application interface.
11. the implementation method of dynamic deformation switch module according to claim 1, which is characterized in that described instruction is to close
Closed state switches the instruction being in an open state；
The changing coordinates correspond to the coordinate that the switch module is closed shown figure, the variation terminating coordinates
The coordinate of the corresponding switch module shown figure in the open state；
When the switch module in the open state, the figure include First Line item, the second lines and third lines；It is described
First lines, the second lines and third lines are sequentially equally spaced, and have same longitudinally asymmetric axis；
When the switch module is closed, the figure includes first lines and the third lines；It is described
First lines and third lines intersection are in X-type.
12. a kind of realization device of dynamic deformation switch module, which is characterized in that including：
Command reception module, the instruction for receiving user's trigger switch component；
Data acquisition module obtains the changing coordinates of figure and variation shown by the switch module for responding described instruction
Terminating coordinates；Obtain the parameter of control pattern variation；
Coordinate calculation module, for according to the parameter, changing coordinates and variation terminating coordinates, calculating the changes in coordinates mistake of figure
Journey；
Graph generation module, the figure for generating the switch module change procedure according to changes in coordinates process.
13. a kind of terminal, which is characterized in that it includes：
One or more processors；
Memory；
One or more application program, wherein one or more of application programs are stored in the memory and are configured
To be executed by one or more of processors, one or more of programs are configured to：It executes according to claim 1 to 11
The implementation method of any one of them dynamic deformation switch module.
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 true CN108388465A (en) | 2018-08-10 |
| CN108388465B 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) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110928622A (en) * | 2019-11-08 | 2020-03-27 | 北京金山安全软件有限公司 | Picture display state adjusting method and device and electronic equipment |
| CN113448579A (en) * | 2021-07-08 | 2021-09-28 | 京东科技控股股份有限公司 | Method and device for realizing edge movement 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 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110928622A (en) * | 2019-11-08 | 2020-03-27 | 北京金山安全软件有限公司 | Picture display state adjusting method and device and electronic equipment |
| CN110928622B (en) * | 2019-11-08 | 2023-11-14 | 北京金山安全软件有限公司 | Picture display state adjusting method and device and electronic equipment |
| CN113448579A (en) * | 2021-07-08 | 2021-09-28 | 京东科技控股股份有限公司 | Method and device for realizing edge movement effect in visual interface |
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108388465B (en) | 2021-04-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108388465A (en) | Implementation method, device and the terminal of dynamic deformation switch module | |
| CN104516502A (en) | Generating haptic effects while minimizing cascading | |
| CN106485956A (en) | A kind of method of demonstration electronic functionalities, device and intelligent terminal | |
| CN111527523A (en) | Apparatus and method for sharing virtual reality environment | |
| CN107798715A (en) | Alignment adsorption method, device, computer equipment and the storage medium of solid figure | |
| CN104951073B (en) | A kind of gesture interaction method based on virtual interface | |
| CN104182999A (en) | Panoramic animation jumping method and system | |
| CN106843681A (en) | The progress control method of touch-control application, device and electronic equipment | |
| CN109509242B (en) | Virtual object facial expression generation method and device, storage medium and electronic equipment | |
| CN110853150A (en) | Method and system for mapping actual space and virtual space suitable for virtual roaming system | |
| CN107678652A (en) | To the method for controlling operation thereof and device of target object | |
| CN108776544A (en) | Exchange method and device, storage medium, electronic equipment in augmented reality | |
| CN103679792A (en) | Rendering method and system for three-dimensional models | |
| CN111369647B (en) | Information processing method and device, computer storage medium and electronic equipment | |
| CN103049266A (en) | Mouse operation method of Delta 3D (Three-Dimensional) scene navigation | |
| CN113377030B (en) | Method for determining intersection signal control model and related device | |
| CN106017483A (en) | Map vehicle icon drawing method and system and navigation terminal | |
| CN110297585A (en) | Electronic white board realization method, device, equipment and storage medium | |
| Fournier-Prunaret et al. | Border collision bifurcations and chaotic sets in a two-dimensional piecewise linear map | |
| CN106815021A (en) | A kind of operation processing method of application, apparatus and system | |
| CN109224448A (en) | A kind of method and apparatus of streamer rendering | |
| CN109815557A (en) | A kind of methods of exhibiting of robot model, device and intelligent terminal | |
| CN108279956B (en) | Progress indicating method, progress indicating device, storage medium and electronic equipment | |
| CN102682461B (en) | A kind of animation rendering intent, system and animation player | |
| CN109493428B (en) | Optimization method and device for three-dimensional virtual model, electronic equipment and storage medium |
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 | ||
| 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. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |