CN110162358A - A kind of method and system for the animation effect indicating component - Google Patents
A kind of method and system for the animation effect indicating component Download PDFInfo
- Publication number
- CN110162358A CN110162358A CN201910281146.0A CN201910281146A CN110162358A CN 110162358 A CN110162358 A CN 110162358A CN 201910281146 A CN201910281146 A CN 201910281146A CN 110162358 A CN110162358 A CN 110162358A
- Authority
- CN
- China
- Prior art keywords
- assembly unit
- moving parts
- several times
- center
- animation effect
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- 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
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of method and systems of animation effect for indicating component, the described method comprises the following steps: obtaining operational order；The position of selected first assembly unit is determined according to operational order；The movement track parameters that moving parts are calculated according to the position of first assembly unit, move back and forth moving parts several times centered on the center of first assembly unit according to movement track parameters.The present invention determines the position of selected first assembly unit according to operational order；Then the movement track parameters of moving parts are calculated according to the position of first assembly unit, and move back and forth moving parts several times centered on the center of first assembly unit according to movement track parameters, to realize a kind of animation effect of the springing back and forth of moving parts after option for indicating component is selected, keep selected option more prominent and eye-catching.The present invention can be widely applied to human-computer interaction technique field.
Description
Technical field
The present invention relates to human-computer interaction technique field, the implementation method of especially a kind of animation effect for indicating component and it is
System.
Background technique
Menu selection item can have many implementations in human-computer interaction interface.User can pass through the heat of click menu
Area to realize the option in selecting choices from menus, usually selected option can with the option do not chosen in display state not
Together.
Especially in vehicle-mounted human-computer interaction interface, many menus can be related to, these menus are generally used to indicate that automobile
Functional status, people are also referred to as indicator, i.e. Indicator.Under normal circumstances, these indicators can pass through volume
Some components of Cheng Yuyan realize, as provided by the programming languages such as JAVA View component etc..
But component provided by mainstream programming language can only provide simple animation effect at present.
Summary of the invention
In order to solve the above technical problems, it is an object of the invention to: a kind of realization of animation effect indicating component is provided
Method and system.To realize a kind of animation effect of moving parts springing back and forth, make the option for indicating to be selected in component more
It is prominent and eye-catching.
The first aspect of the embodiment of the present invention provides:
A kind of implementation method for the animation effect indicating component, comprising the following steps:
Obtain operational order；
The position of selected first assembly unit is determined according to operational order；
The movement track parameters that moving parts are calculated according to the position of first assembly unit make moving parts according to movement rail
Mark parameter is moved back and forth several times centered on the center of first assembly unit.
Further, described to be moved back and forth centered on the center of first assembly unit several times, it specifically includes:
Centered on the center of first assembly unit, moved back and forth several times in longitudinal direction；
Or
Centered on the center of first assembly unit, moved back and forth several times in transverse direction.
Further, further comprising the steps of:
Obtain the position of the second assembly unit, wherein the second assembly unit is to be in choose before obtaining operational order
The assembly unit of state；
The movement track parameters that moving parts are calculated according to the position of first assembly unit, make moving parts according to fortune
Dynamic trajectory parameters are moved back and forth several times centered on the center of first assembly unit, specifically:
According to the position of the position of the second assembly unit and first assembly unit, the motion profile ginseng of moving parts is calculated
Number makes moving parts according to movement track parameters, first first assembly unit is slided into from the second assembly unit, then with first group
It is moved back and forth several times centered on the center of part unit.
Further, further comprising the steps of:
Obtain the movement velocity parameter of animation component；
It is described according to the position of the second assembly unit and the position of first assembly unit, calculate the motion profile of moving parts
Parameter specifically includes:
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, moving parts are calculated
Trajectory parameters；
Or
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, moving parts are calculated
Movement track parameters when sliding into first assembly unit from the second assembly unit, then according to the position of first assembly unit,
Calculate movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit；
Or
According to the position of the position of the second assembly unit and first assembly unit, moving parts are calculated from the second assembly unit
Movement track parameters when first assembly unit are slided into, then according to the position of first assembly unit and movement velocity parameter,
Calculate movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit.
It is further, described to move back and forth several times, specifically:
It is moved back and forth several times in such a way that move distance is gradually decayed.
Further, the moving parts are when moving back and forth several times, each move distance than last movement away from
From the preset ratio of reduction or preset value.
Further, the moving parts centered on the center of first assembly unit when being moved back and forth several times
Movement track parameters are calculated by Spring interpolation device.
Further, further comprising the steps of:
First assembly unit is switched to selected state from non-selected state；
Second assembly unit is switched to non-selected state from selected state.
The second aspect of the embodiment of the present invention provides:
A kind of realization system for the animation effect indicating component, comprising:
Acquiring unit, for obtaining operational order；
Determination unit, for determining the position of selected first assembly unit according to operational order；
Animation realizes unit, for calculating the movement track parameters of moving parts according to the position of first assembly unit, makes
Moving parts are moved back and forth several times centered on the center of first assembly unit according to movement track parameters.
The third aspect of the embodiment of the present invention provides:
A kind of realization system for the animation effect indicating component, comprising:
Memory, for storing program；
Processor executes the implementation method of the animation effect of the instruction component for loading described program.
The beneficial effects of the present invention are: the present invention determines the position of selected first assembly unit according to operational order；
According to the position of first assembly unit calculate moving parts movement track parameters, make moving parts according to movement track parameters with
It is moved back and forth centered on the center of first assembly unit several times, thus after realizing that a kind of option for indicating component is selected
The animation effect of moving parts springing back and forth keeps selected option more prominent and eye-catching.
Detailed description of the invention
Fig. 1 is a kind of flow chart of the implementation method of the animation effect of the instruction component of specific embodiment of the present invention；
Fig. 2 is a kind of schematic diagram of the animation effect of the instruction component of specific embodiment of the present invention；
Fig. 3 is a kind of signal of motion profile in the case where uniform motion of the moving parts of specific embodiment of the present invention
Figure；
Fig. 4 is a kind of signal of motion profile in the case where variable motion of the moving parts of specific embodiment of the present invention
Figure；
Fig. 5 is a kind of schematic diagram of the describing mode of the motion profile of the moving parts of specific embodiment of the present invention；
Fig. 6 is the first structural schematic diagram of the instruction component of the specific embodiment of the invention；
Fig. 7 is second of structural schematic diagram of the instruction component of the specific embodiment of the invention；
Fig. 8 is the third structural schematic diagram of the instruction component of the specific embodiment of the invention.
Specific embodiment
The present invention is further detailed with specific embodiment with reference to the accompanying drawings of the specification.
Referring to Fig.1, present embodiment discloses a kind of implementation method of animation effect for indicating component, the present embodiment can be answered
With in the computer equipment for having display screen, the computer equipment can execute following methods, and be shown by display screen
Animation effect out.The computer equipment can be the equipment such as vehicle-mounted large-size screen monitors, mobile phone or plate on automobile.
The method of the present embodiment the following steps are included:
S1, operational order is obtained.
The operational order is triggered or is inputted by user, wherein can pass through touch screen, microphone, mouse or key
The input of the physics peripheral hardware such as disk, and the operational order is obtained by computer equipment.That is, the operational order can be by sound
What the modes such as sound, touch or click were triggered.
S2, the position that selected first assembly unit is determined according to operational order.
In the present embodiment, the position of first assembly unit can refer to the position of the center of first assembly unit in systems
Coordinate.Or refer to the set of multiple coordinate points for describing the position of first assembly unit in systems.
For example, first assembly unit is a circle, this circular position can be described by the position coordinates in the center of circle
It sets.For another example first assembly unit is a rectangle, can be described by describing rectangular two opposite vertex
This rectangular position.And for the case where first assembly unit is irregular figure, designated centers position can be taken
Mode.For example, an irregular cartoon shape, it can be by a point of the irregular cartoon shape customized in design
As its center coordinate points, first assembly unit is then described by the appointed centre coordinate point position.
Therefore, the position of first assembly unit is described by one or more coordinate points.
S3, the movement track parameters that moving parts are calculated according to the position of first assembly unit, make moving parts according to fortune
Dynamic trajectory parameters are moved back and forth several times centered on the center of first assembly unit.
Option and an exercise group of four assembly units as four menus are created in the present embodiment referring to Fig. 2
Part 200, including assembly unit 201, assembly unit 202, assembly unit 203 and assembly unit 204, these assembly units by
The container that item (including picture and text etc.) is added is constituted, and the present embodiment is arranged one on the item of each container
Animation effect when selected after being clicked certainly with the corresponding hot-zone item, triggers animation effect.The moving parts 200
It is used to indicate selected assembly unit, the moving parts 200 are also referred to as cover in some scenes.In the present embodiment
In, at time point 0, moving parts 200 are on the position of assembly unit 201, indicate that assembly unit 201 is in selected shape
State.In the present embodiment, the assembly unit 204 that user chooses between time point 0 and time point 1, for example, user clicks one
Hot-zone corresponding to lower component unit 204 triggers the animation effect of moving parts 200, i.e. the movement of triggering moving parts.It is first
First, between time point 1 at the time of user chooses assembly unit 204, moving parts 200 are moved from the position of assembly unit 201
On the position for moving assembly unit 204, i.e. the left edge of moving parts 200 position that is in point E, right edge is in the position of point A
It sets.Then between time point 1 to time point 2, moving parts 200 continue toward moving right, until the position of right hand edge point of arrival B
It sets.Between time point 2 to time point 3, moving parts 200 are back moved, i.e., toward left movement, until on its left side of time point 3
Edge moves to the position of point C.Then between time point 3 and time point 4, moving parts 200 are turned back movement of turning right again, in the time
Point 4, the position of right hand edge point of arrival D.Between time point 4 and time point 5, moving parts 200 again toward left movement, and when
Between put 5, stop on assembly unit 204, i.e. the left edge position that is in point E, right edge is in the position of point A.
In visual effect, moving parts 200 are firstly moved to the position of assembly unit 204 from the position of assembly unit 201
It sets, is then moved back and forth in the direction of the x-axis for several times using the center of assembly unit 204 as the centre of motion.
In following section Example, selected assembly unit, such as assembly unit are referred to using first assembly unit
204；It is referred to using the second assembly unit and the component list chosen is selected or defaulted before first assembly unit is selected
Member, such as assembly unit 201.
From above-mentioned motion process it is found that the motion profile of moving parts can be divided into two parts, i.e., from the second assembly unit
The motion profile and moving parts for moving to first assembly unit are carried out centered on the center of first assembly unit to backhaul
Dynamic motion profile.Moving parts are moved to the motion profile of first assembly unit from the second assembly unit in the present embodiment
The track that moving parts are moved back and forth centered on the center of first assembly unit is referred to as the second rail by referred to as the first track
Mark.
When generating the first track, following several implementations can be taken:
The first, moving parts moment from the second assembly unit, is moved on the position of first assembly unit, then again certainly
The second track of row.For example, moving parts are on the position of the second assembly unit, at second among first image frame
When image frame occurs, moving parts are on the position of first assembly unit.
Second, moving parts are gradually moved into the position of first assembly unit with certain speed from the second assembly unit
On.Wherein the speed refers to that the relative position of moving parts between adjacent two frame changes obtained by the time interval divided by two frames
Value.For example, the pixel speed per second for describing moving parts as unit can be used.Moving parts are along the first track
When movement, it can be at the uniform velocity, be also possible to speed change.In some embodiments, moving parts every two consecutive frame it
Between relative position variation it is all the same.In further embodiments, relative position of the moving parts between two consecutive frames becomes
Change is not identical, such as 1 pixel has been moved between first frame and the second frame, and moves between the second frame and third frame
2 pixels, have moved 3 pixels between third frame and the 4th frame, show a kind of state of acceleration.
When moving parts are moved along the second track, i.e., moving parts are come centered on the center of first assembly unit
When backhauling dynamic, a variety of implementations can also be taken.
In some embodiments, the times of exercise of moving parts is fixed, for example, moving back and forth three times, i.e., is transported to the left
It moves three times, moves right three times, then the stop motion on the position of first assembly unit.In further embodiments, it moves
The times of exercise of component is to be not fixed, depending on the distance between first assembly unit and the second assembly unit.For example, such as
Farther out, moving parts move the distance of fruit first assembly unit and the second assembly unit back when moving along the second track
Number it is more, i.e., in some embodiments, number that moving parts move back and forth and first assembly unit and the second component list
The distance of member is directly proportional.
Other than operating speed goes the motion state of constrained motion component, constrained motion component can also be gone using the time
Motion state, such as the presentation time that each animation can be limited as 0.5 second, animation is then determined according to the time of presentation
Motion state, such as move distance and movement velocity.
In some embodiments, for moving parts when moving back and forth, move distance to the left and to the right is equal, example
Such as, when moving downward or move right every time, the distance of movement is 30 pixels.
In further embodiments, moving parts are when moving back and forth, move distance to the left and to the right be it is unequal,
Such as when moving right be 30 pixels, it is 20 pixels when moving downward.
In further embodiments, for moving parts when moving back and forth, the distance moved each time is unequal, example
Such as, when moving right for the first time, from center turn right movement 30 pixels moved to when moving downward for the first time from right side
Center is further continued for moving downward 20 pixels, when moving right for the second time, first moves right to center and then proceedes to transport to the right
10 pixels are moved, finally moves downward to center and stops.Moving parts are when moving back and forth in the present embodiment, present by
The trend of secondary decaying.
In addition, when being moved with the second track of moving parts, movement velocity can also be there are many implementation.
Referring to Fig. 3, ordinate indicates the position of moving parts in a lateral direction in coordinate system.Moving parts are from second group
The location of part unit point p3 moves to the location of first assembly unit point O3.Its middle conductor 301 indicates moving parts
Change in location when moving along the first track, line segment group 302 indicate change in location when moving parts are moved along the second track.
The absolute value of the slope of straight line in the coordinate system of Fig. 3 is all the same, but symbol is different.Therefore straight in Fig. 3
The slope of line indicates the movement velocity of moving parts in a lateral direction.As shown in figure 3, moving parts are in a manner of at the uniform velocity and are in
The form gradually to decay moves back and forth.
Similarly, in Fig. 4, ordinate indicates the position of moving parts in a lateral direction in coordinate system.Moving parts from
The location of second assembly unit point p4 moves to the location of first assembly unit point O4.Its middle conductor 401 indicates fortune
Change in location when dynamic component is moved along the first track, line segment group 402 indicate position when moving parts are moved along the second track
Set variation.Figure 4, it is seen that the slope of variation is presented in line segment group 402, i.e. moving parts are fast in the process of movement
Degree is variation, and the sine wave of a decaying is presented during the motion.
The description as described in motion profile, in the present embodiment can be using some coordinate parameters to the movement rail of moving parts
Mark is described.Describing mode also there are many kinds of.
Among some embodiments, one motion profile can be described with multiple endpoints of motion profile, referring to Fig. 5,
In the present embodiment, moving parts are moved right since point O5, and in t1, moving parts move to point A5, are then transported to the left
It is dynamic, and the point of arrival B5 in t1, then moving parts move right, and the point of arrival C5 in t2, and last moving parts are in t3
Shi Congdian C5 stops after moving to point D5.This section of motion profile can describe in the following manner:
(O5, A5), (A5, B5), (B5, C5), (C5, D5).
Certain specific expression way is different according to the difference of program language.It in the present embodiment, can be according to movement
The parameter of track calculates position of the moving parts among each image frame in conjunction with the movement velocity of moving parts, thus raw
At a continuous animation.
In further embodiments, the position coordinates of moving parts in each frame picture can also be directly determined out, then
Using a series of coordinate points as motion profile.For example, motion profile can be written to each coordinate points, i.e. handle in a program
Motion profile fixation writes among program.
The case where only moving back and forth in a lateral direction to moving parts above is illustrated, but simultaneously unexpectedly
Taste moving parts can only be moved in a lateral direction.
In some embodiments, the moving parts can also be centered on the center of first assembly unit, in longitudinal side
It realizes and moves back and forth upwards.It, can be according to above-mentioned implementation as the specific implementation details that moving parts move in a longitudinal direction
The realization details of moving parts described in example converts to obtain.
Then the instruction component constituted to multiple assembly units is illustrated.
Referring to Fig. 6, in the present embodiment, indicate component by assembly unit 601, assembly unit 602 and assembly unit 603
It is formed with assembly unit 604 and moving parts 600.In the present embodiment, moving parts 600 move in a lateral direction.Certainly,
The moving parts 600 of the present embodiment are when realization moves back and forth, that is, can also be in longitudinal direction when the effect of springing back and forth is presented
Implement.Wherein, in the present embodiment, assembly unit 601, assembly unit 602 and assembly unit 603 and assembly unit 604 are height
Degree and the variable horizontal vessel of width, they are added with the interface of text and picture, meanwhile, each assembly unit is respectively provided with
There is click event.
Referring to Fig. 7, in the present embodiment, indicate component by assembly unit 701, assembly unit 702 and assembly unit 703
It is formed with assembly unit 704 and moving parts 700.In the present embodiment, moving parts 700 move in a longitudinal direction.Certainly,
The moving parts 700 of the present embodiment are when realization moves back and forth, that is, can also be in transverse direction when the effect of springing back and forth is presented
Upper implementation.Wherein, in the present embodiment, assembly unit 701, assembly unit 702 and assembly unit 703 and assembly unit 704 are equal
For the high vertical container that can broaden, they are added with the interface of text and picture, meanwhile, each assembly unit is respectively provided with a little
Hit event.
Referring to Fig. 8, in the present embodiment, indicate component by assembly unit 801, assembly unit 802 and assembly unit 803
It is formed with assembly unit 804 and moving parts 800, they form a criss-cross instruction component.In the present embodiment, it moves
Component 800 can not only move in a longitudinal direction, but also can move in a lateral direction, according to the start bit of moving parts 800
Set and target position, moving parts 800 can first transverse movement longitudinal movement again, or first longitudinal movement transverse movement again.?
Moving parts 800 can be implemented when implementing springing back and forth in longitudinal direction or transverse direction in the present embodiment.
In conclusion a kind of dynamic animation effect of the selected rebound later of option for indicating component may be implemented in above-described embodiment
Fruit keeps selected option more prominent and eye-catching.
It is described to be moved back and forth centered on the center of first assembly unit several times as preferred embodiment,
It specifically includes:
Centered on the center of first assembly unit, moved back and forth several times in longitudinal direction；
Or
Centered on the center of first assembly unit, moved back and forth several times in transverse direction.
In the present embodiment, the center of the first assembly unit, can be the center of setting, is also possible to
The geometric center of first assembly unit.If the geometric center of rectangle is two cornerwise intersection points of rectangle, circular geometric center
It is the center of circle.
The present embodiment makes moving parts realize springing back and forth, generation pair centered on the center of first assembly unit
The aesthetic feeling of title, so that the available better visual effect of user.In addition, present embodiments providing transverse movement and longitudinal movement
Two ways, so that the more diversification of the type of indicator.
It is further comprising the steps of as preferred embodiment:
Obtain the position of the second assembly unit, wherein the second assembly unit is to be in choose before obtaining operational order
The assembly unit of state；
The step S3, specifically:
According to the position of the position of the second assembly unit and first assembly unit, the motion profile ginseng of moving parts is calculated
Number makes moving parts according to movement track parameters, first first assembly unit is slided into from the second assembly unit, then with first group
It is moved back and forth several times centered on the center of part unit.
Moving parts in the present embodiment first slide into first assembly list from the second assembly unit according to movement track parameters
Member, it is visually more smooth, Caton sense can be experienced to avoid user, so that animation is more coherent and smooth.
Certainly, it means that in the present embodiment, it is sliding from the position of the second assembly unit to need to calculate moving parts
When moving the position of first assembly unit, position coordinates of the moving parts on each frame.
It is further comprising the steps of as preferred embodiment:
Obtain the movement velocity parameter of animation component；
In the present embodiment, described to be moved according to the position of the second assembly unit with the position of first assembly unit, calculating
The movement track parameters of component, specifically include:
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, moving parts are calculated
Trajectory parameters.In the present embodiment, the movement velocity of moving parts remains unchanged, the uniform motion in entire motion process,
When realizing springing back and forth, moving parts only have direction of motion change.
In further embodiments, described according to the position of the second assembly unit and the position of first assembly unit, it calculates
The movement track parameters of moving parts, specifically include:
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, moving parts are calculated
Movement track parameters when sliding into first assembly unit from the second assembly unit, then according to the position of first assembly unit,
Calculate movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit.At this
Movement in embodiment, when sliding into first assembly unit from the second assembly unit according to movement velocity parameter setting moving parts
Speed, and speed of the moving parts when moving back and forth is the not settable value of user.
In further embodiments, described according to the position of the second assembly unit and the position of first assembly unit, it calculates
The movement track parameters of moving parts, specifically include:
According to the position of the position of the second assembly unit and first assembly unit, moving parts are calculated from the second assembly unit
Movement track parameters when first assembly unit are slided into, then according to the position of first assembly unit and movement velocity parameter,
Calculate movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit.At this
In embodiment, according to movement velocity of the movement velocity parameter setting moving parts when moving back and forth, and moving parts are from
Speed when two assembly units slide into first assembly unit is the not settable value of user.
In the above-described embodiments, according to the fortune of the position and moving parts of first assembly unit and the second assembly unit
Dynamic speed, so that it may when calculating moves to first assembly unit from the second assembly unit, the motion profile of moving parts.
When execution moves back and forth, it is only necessary to determine the position of first assembly unit, and back and forth springing when move back and forth
Number and each move distance, so that it may obtain motion profile of the moving parts in springing back and forth.
Embodiment adds movement velocity parameters, so that the movement velocity of animation component is adjustable.The movement speed
Degree parameter is written among configuration file or is placed among the setting unit of software, in order to which user is adjusted.
It is described to move back and forth several times as preferred embodiment, specifically:
It is moved back and forth several times in such a way that move distance is gradually decayed.
In the present embodiment, it moves back and forth several times, has more naturally in such a way that move distance is gradually decayed
Springing effect can bring better visual experience.
As preferred embodiment, for the moving parts when moving back and forth several times, each move distance is than upper one
Secondary move distance reduces preset ratio or preset value.
In the present embodiment, each move distance of moving parts reduces by 50%, certainly, fortune referred herein than last
Dynamic distance refers to move distance of the moving parts relative to first assembly unit center.
As alternative embodiment, each move distance of moving parts is set than last and reduces a fixed value, example
As reduced by 10 pixels every time, just make moving parts stop motion until final move distance is less than or equal to 0.Either
The times of exercise of moving parts reaches ability stop motion after setting number.
As preferred embodiment, the moving parts are moved back and forth centered on the center of first assembly unit
Movement track parameters when several times are calculated by Spring interpolation device.
Wherein, the Spring interpolation device realizes motion profile of the moving parts when moving back and forth by following formula
It calculates.
Pow (2, -10*x) * sin ((x-factor/4) * (2* π)/factor)+1.
Wherein, pow (a, b) operation indicates to seek the b power of a, and in the present embodiment, x indicates time change value, and factor is
Constant.In the present embodiment, due to the presence of SIN function, the sinusoidal waveform of decaying can be presented in the value of dishing out of this function.
The present embodiment is calculated motion profile using Spring interpolation device and applies code in different fingers convenient for developer
Show among component, i.e., applies the present embodiment in different instruction components, without modifying motion profile repeatedly.
It is further comprising the steps of as preferred embodiment:
First assembly unit is switched to selected state from non-selected state；
Second assembly unit is switched to non-selected state from selected state.
Among the present embodiment, assembly unit includes two states, i.e. selected state and non-selected state.Assembly unit exists
In the state of difference, display effect is not identical.For example, assembly unit, under selected state, text is highlighted state, and it is in
When non-selected state, text is gray states.
The present embodiment switches over assembly unit from selected state and non-selected state, so that selected component list
Member has purpose mark of more waking up.
Present embodiment discloses a kind of realization systems of animation effect for indicating component, comprising:
Acquiring unit, for obtaining operational order；
Determination unit, for determining the position of selected first assembly unit according to operational order；
Animation realizes unit, for calculating the movement track parameters of moving parts according to the position of first assembly unit, makes
Moving parts are moved back and forth several times centered on the center of first assembly unit according to movement track parameters.
Present embodiment discloses a kind of realization systems of animation effect for indicating component, comprising:
Memory, for storing program；
Processor executes the implementation method of the animation effect of the instruction component for loading described program.
The above system embodiment can be realized technical effect identical with embodiment of the method.
For the step number in above method embodiment, it is arranged only for the purposes of illustrating explanation, between step
Sequence do not do any restriction, the execution of each step in embodiment sequence can according to the understanding of those skilled in the art come into
Row is adaptively adjusted.
It is to be illustrated to preferable implementation of the invention, but the present invention is not limited to the embodiment above, it is ripe
Various equivalent deformation or replacement can also be made on the premise of without prejudice to spirit of the invention by knowing those skilled in the art, this
Equivalent deformation or replacement are all included in the scope defined by the claims of the present application a bit.
Claims (10)
1. a kind of implementation method for the animation effect for indicating component, it is characterised in that: the following steps are included:
Obtain operational order；
The position of selected first assembly unit is determined according to operational order；
The movement track parameters that moving parts are calculated according to the position of first assembly unit, join moving parts according to motion profile
Number is moved back and forth several times centered on the center of first assembly unit.
2. a kind of implementation method of animation effect for indicating component according to claim 1, it is characterised in that: described with the
It moves back and forth several times, specifically includes centered on the center of one assembly unit:
Centered on the center of first assembly unit, moved back and forth several times in longitudinal direction；Or
Centered on the center of first assembly unit, moved back and forth several times in transverse direction.
3. it is according to claim 1 it is a kind of indicate component animation effect implementation method, it is characterised in that: further include with
Lower step:
Obtain the position of the second assembly unit, wherein the second assembly unit is that selected state is in front of obtaining operational order
Assembly unit；
The movement track parameters that moving parts are calculated according to the position of first assembly unit make moving parts according to movement rail
Mark parameter is moved back and forth several times centered on the center of first assembly unit, specifically:
According to the position of the position of the second assembly unit and first assembly unit, the movement track parameters of moving parts are calculated, are made
Moving parts first slide into first assembly unit from the second assembly unit, then with first assembly list according to movement track parameters
It is moved back and forth several times centered on the center of member.
4. it is according to claim 3 it is a kind of indicate component animation effect implementation method, it is characterised in that: further include with
Lower step:
Obtain the movement velocity parameter of animation component；
It is described to be joined according to the position of the second assembly unit with the position of first assembly unit, the motion profile for calculating moving parts
Number, specifically includes:
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, the rail of moving parts is calculated
Mark parameter；Or
According to the position of the second assembly unit, the position of first assembly unit and movement velocity parameter, moving parts are calculated from the
Two assembly units slide into movement track parameters when first assembly unit, then according to the position of first assembly unit, calculate
Movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit；Or
According to the position of the position of the second assembly unit and first assembly unit, calculates moving parts and slided from the second assembly unit
Movement track parameters when to first assembly unit calculate then according to the position of first assembly unit and movement velocity parameter
Movement track parameters when moving parts are moved back and forth several times centered on the center of first assembly unit.
5. it is according to claim 1 it is a kind of indicate component animation effect implementation method, it is characterised in that: it is described back and forth
It moves several times, specifically:
It is moved back and forth several times in such a way that move distance is gradually decayed.
6. a kind of implementation method of animation effect for indicating component according to claim 5, it is characterised in that: the movement
When moving back and forth several times, each move distance reduces preset ratio than last move distance or presets component
Value.
7. a kind of implementation method of animation effect for indicating component according to claim 1, it is characterised in that: the movement
Movement track parameters of the component when being moved back and forth several times centered on the center of first assembly unit, pass through Spring
Interpolation device calculates.
8. it is according to claim 1 it is a kind of indicate component animation effect implementation method, it is characterised in that: further include with
Lower step:
First assembly unit is switched to selected state from non-selected state；
Second assembly unit is switched to non-selected state from selected state.
9. a kind of realization system for the animation effect for indicating component, it is characterised in that: include:
Acquiring unit, for obtaining operational order；
Determination unit, for determining the position of selected first assembly unit according to operational order；
Animation realizes unit, for calculating the movement track parameters of moving parts according to the position of first assembly unit, makes to move
Component is moved back and forth several times centered on the center of first assembly unit according to movement track parameters.
10. a kind of realization system for the animation effect for indicating component, it is characterised in that: include:
Memory, for storing program；
Processor, for loading described program to execute the animation effect such as the described in any item instruction components of claim 1-8
Implementation method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910281146.0A CN110162358A (en) | 2019-04-09 | 2019-04-09 | A kind of method and system for the animation effect indicating component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910281146.0A CN110162358A (en) | 2019-04-09 | 2019-04-09 | A kind of method and system for the animation effect indicating component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110162358A true CN110162358A (en) | 2019-08-23 |
Family
ID=67639209
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910281146.0A Pending CN110162358A (en) | 2019-04-09 | 2019-04-09 | A kind of method and system for the animation effect indicating component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110162358A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113448579A (en) * | 2021-07-08 | 2021-09-28 | 京东科技控股股份有限公司 | Method and device for realizing edge movement effect in visual interface |
| CN113867869A (en) * | 2021-09-29 | 2021-12-31 | 上海哔哩哔哩科技有限公司 | Interactive data display method and device |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1452087A (en) * | 2003-05-27 | 2003-10-29 | 无敌科技(西安)有限公司 | System and method for playback of animation using electronic dictionary |
| CN1525358A (en) * | 2003-02-27 | 2004-09-01 | 无敌科技股份有限公司 | System and method for generating graphics and animation by using vector graphics component |
| CN102495708A (en) * | 2011-12-16 | 2012-06-13 | 上海华勤通讯技术有限公司 | Mobile terminal and operating method for standby interface of mobile terminal |
| CN102722357A (en) * | 2011-03-29 | 2012-10-10 | 北京新媒传信科技有限公司 | A method and a device for icon display |
| CN103049272A (en) * | 2012-12-28 | 2013-04-17 | 北京新媒传信科技有限公司 | Method and device for dragging controls |
| CN104182125A (en) * | 2014-08-25 | 2014-12-03 | 腾讯科技（深圳）有限公司 | Method and device for triggering and operating suspension windows |
| CN104423870A (en) * | 2013-09-10 | 2015-03-18 | 北京三星通信技术研究有限公司 | Control in graphical user interface, display method as well as method and device for operating control |
| CN105787983A (en) * | 2016-03-21 | 2016-07-20 | 上海斐讯数据通信技术有限公司 | System and method for realizing animation effect through Checkbox control |
-
2019
- 2019-04-09 CN CN201910281146.0A patent/CN110162358A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1525358A (en) * | 2003-02-27 | 2004-09-01 | 无敌科技股份有限公司 | System and method for generating graphics and animation by using vector graphics component |
| CN1452087A (en) * | 2003-05-27 | 2003-10-29 | 无敌科技(西安)有限公司 | System and method for playback of animation using electronic dictionary |
| CN102722357A (en) * | 2011-03-29 | 2012-10-10 | 北京新媒传信科技有限公司 | A method and a device for icon display |
| CN102495708A (en) * | 2011-12-16 | 2012-06-13 | 上海华勤通讯技术有限公司 | Mobile terminal and operating method for standby interface of mobile terminal |
| CN103049272A (en) * | 2012-12-28 | 2013-04-17 | 北京新媒传信科技有限公司 | Method and device for dragging controls |
| CN104423870A (en) * | 2013-09-10 | 2015-03-18 | 北京三星通信技术研究有限公司 | Control in graphical user interface, display method as well as method and device for operating control |
| CN104182125A (en) * | 2014-08-25 | 2014-12-03 | 腾讯科技（深圳）有限公司 | Method and device for triggering and operating suspension windows |
| CN105787983A (en) * | 2016-03-21 | 2016-07-20 | 上海斐讯数据通信技术有限公司 | System and method for realizing animation effect through Checkbox control |
Non-Patent Citations (1)
| Title |
|---|
| 踏破铁鞋5寻花: ""实现类似弹簧的插值器springinterpolator"", 《HTTPS://BLOG.CSDN.NET/U013581141/ARTICLE/DETAILS/50738278》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
| CN113867869A (en) * | 2021-09-29 | 2021-12-31 | 上海哔哩哔哩科技有限公司 | Interactive data display method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10162483B1 (en) | User interface systems and methods | |
| US9058073B2 (en) | Electronic device and adjustment method for adjusting setting value | |
| US5986656A (en) | Graphical user interface control element | |
| Casiez et al. | The impact of control-display gain on user performance in pointing tasks | |
| US9141261B2 (en) | System and method for providing user access | |
| JP2021015617A (en) | Device, method, and graphical user interface for providing tactile feedback | |
| KR101686581B1 (en) | User Interface for Toolbar Navigation | |
| US5666504A (en) | Method for displaying a graphical rocker button control | |
| CN102929556B (en) | Method and equipment for interaction control based on touch screen | |
| US20140282154A1 (en) | Method for processing a compound gesture, and associated device and user terminal | |
| US10345996B2 (en) | User interface systems and methods | |
| US20100077345A1 (en) | Indicating input focus by showing focus transitions | |
| CN103038737A (en) | Highlighting of objects on a display | |
| US11226734B1 (en) | Triggering multiple actions from a single gesture | |
| WO2015120073A9 (en) | Low-latency visual response to input via pre-generation of alternative graphical representations of application elements and input handling on a graphical processing unit | |
| CN110347317A (en) | Window switching method and device, storage medium and interactive intelligent panel | |
| CN110162358A (en) | A kind of method and system for the animation effect indicating component | |
| CN105843470A (en) | Information processing method and electronic device | |
| Mihara et al. | The migratory cursor: accurate speech-based cursor movement by moving multiple ghost cursors using non-verbal vocalizations | |
| KR20060047336A (en) | System and method for aligning objects using nonlinear pointer movement | |
| CN109766034A (en) | Method, apparatus, equipment and the storage medium of quickly starting application program | |
| KR20160018265A (en) | Method and apparatus of controlling display, and computer program for executing the method | |
| CN109885250A (en) | A kind of interface alternation method and apparatus | |
| CN111311760B (en) | Three-dimensional building display method, system, device and storage medium | |
| CN105094554A (en) | Method and system for displaying |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190823 |