CN107168606B - Dialog control display methods, device and user terminal - Google Patents
Dialog control display methods, device and user terminal Download PDFInfo
- Publication number
- CN107168606B CN107168606B CN201710346723.0A CN201710346723A CN107168606B CN 107168606 B CN107168606 B CN 107168606B CN 201710346723 A CN201710346723 A CN 201710346723A CN 107168606 B CN107168606 B CN 107168606B
- Authority
- CN
- China
- Prior art keywords
- primary
- control
- background
- animation effect
- dialog box
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the present invention provides a kind of dialog control display methods, device and user terminal, the described method includes: when receiving first triggering command, primary dialog box in control target dialogue frame control is shown with the first animation effect, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein, the target dialogue frame control is obtained based on primary dialog control, the primary dialog control includes primary dialog box and primary background, and the primary dialog box and the primary background correspond to primary animation effect.The method shows that primary dialog box and the first background with different animation effects, so that user experience improves, and target dialogue frame control is the performance for being obtained based on primary dialog control, therefore will not influence primary dialog box.
Description
Technical field
The present invention relates to computer application fields, in particular to a kind of dialog control display methods, device and use
Family terminal.
Background technique
It include primary dialog box and primary back in the primary dialog control provided by React Native official website
Scape, which is dark background, and the primary dialog box and the primary background correspond to the same primary animation effect.
Therefore, when user terminal receives the triggering command of user, the primary dialog box and the primary background can be controlled according to same
One primary animation effect slides into user terminal interface from the bottom of user terminal together, so that user experience is bad.
Summary of the invention
In view of this, the embodiment of the present invention is designed to provide a kind of dialog control display methods, device and user
Terminal, to solve the above problems.
To achieve the goals above, technical solution used in the embodiment of the present invention is as follows:
In a first aspect, the embodiment of the invention provides a kind of dialog control display methods, which comprises work as reception
When to first triggering command, the primary dialog box controlled in target dialogue frame control is shown with the first animation effect, and same time control
The first background made in the target dialogue frame control is shown with the second animation effect, wherein is obtained based on primary dialog control
The process of the target dialogue frame control includes: that first background is added in the primary dialog control, and be institute
The control that second animation effect is realized in the addition of the first background is stated, the primary dialog control includes primary dialog box and original
Raw background, the primary dialog box and the primary background correspond to primary animation effect.
Second aspect, the embodiment of the invention provides a kind of dialog control display device, described device includes: display mould
Block, for when receiving first triggering command, controlling the primary dialog box in target dialogue frame control with the first animation effect
It has been shown that, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein based on primary
The process that dialog control obtains the target dialogue frame control includes: to be added described first in the primary dialog control
Background, and be the control of first background addition realization, second animation effect, the primary dialog control includes original
Raw dialog box and primary background, the primary dialog box and the primary background correspond to primary animation effect.
The third aspect, the embodiment of the invention provides a kind of user terminal, the user terminal includes memory and processing
Device, the memory are couple to the processor, the memory store instruction, when executed by the processor
So that the processor executes following operation: when receiving first triggering command, controlling primary in target dialogue frame control
Dialog box is shown with the first animation effect, and the first background controlled in the target dialogue frame control simultaneously is imitated with the second animation
Fruit shows, wherein based on the process that primary dialog control obtains the target dialogue frame control includes: in the primary dialogue
First background is added in frame control, and realizes the control of second animation effect for first background addition, it is described
Primary dialog control includes primary dialog box and primary background, and the primary dialog box and the primary background correspond to primary
Animation effect.
Compared with prior art, a kind of dialog control display methods provided in an embodiment of the present invention, device and user are whole
End, by when receiving first triggering command, controlling the primary dialog box in target dialogue frame control with the first animation effect
It has been shown that, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein the target
Dialog control is obtained based on primary dialog control, and this programme moves primary dialog box and the first background with different
It draws effect and is shown that so that user experience improves, and target dialogue frame control is obtained based on primary dialog control,
Therefore it will not influence the performance of primary dialog box.
To enable the above objects, features and advantages of the present invention to be clearer and more comprehensible, preferred embodiment is cited below particularly, and cooperate
Appended attached drawing, is described in detail below.
Detailed description of the invention
In order to illustrate the technical solution of the embodiments of the present invention more clearly, below will be to needed in the embodiment attached
Figure is briefly described, it should be understood that the following drawings illustrates only certain embodiments of the present invention, therefore is not construed as pair
The restriction of range for those of ordinary skill in the art without creative efforts, can also be according to this
A little attached drawings obtain other relevant attached drawings.
Fig. 1 is a kind of structural block diagram of user terminal provided in an embodiment of the present invention.
Fig. 2 is a kind of flow chart for dialog control display methods that first embodiment of the invention provides.
Fig. 3 is a kind of schematic diagram for dialog control display methods that first embodiment of the invention provides.
Fig. 4 is a kind of first part's flow chart for dialog control display methods that first embodiment of the invention provides.
Fig. 5 is a kind of second part flow chart for dialog control display methods that first embodiment of the invention provides.
Fig. 6 is a kind of structural block diagram for dialog control display device that second embodiment of the invention provides.
Specific embodiment
Below in conjunction with attached drawing in the embodiment of the present invention, technical solution in the embodiment of the present invention carries out clear, complete
Ground description, it is clear that described embodiments are only a part of the embodiments of the present invention, instead of all the embodiments.Usually exist
The component of the embodiment of the present invention described and illustrated in attached drawing can be arranged and be designed with a variety of different configurations herein.Cause
This, is not intended to limit claimed invention to the detailed description of the embodiment of the present invention provided in the accompanying drawings below
Range, but it is merely representative of selected embodiment of the invention.Based on the embodiment of the present invention, those skilled in the art are not doing
Every other embodiment obtained under the premise of creative work out, shall fall within the protection scope of the present invention.
It should also be noted that similar label and letter indicate similar terms in following attached drawing, therefore, once a certain Xiang Yi
It is defined in a attached drawing, does not then need that it is further defined and explained in subsequent attached drawing.Meanwhile of the invention
In description, term " first ", " third " etc. are only used for distinguishing description, are not understood to indicate or imply relative importance.
Fig. 1 shows a kind of structural block diagram of user terminal 100 that can be applied in the embodiment of the present invention.As shown in Figure 1,
User terminal 100 includes memory 102, storage control 104, one or more (one is only shown in figure) processors 106, outer
If interface 108, radio-frequency module 110, audio-frequency module 112, Touch Screen 114 etc..These components are total by one or more communication
Line/signal wire 116 mutually communicates.
Memory 102 can be used for storing software program and module, as the dialog control in the embodiment of the present invention is shown
Method and the corresponding program instruction/module of device, the software program that processor 106 is stored in memory 102 by operation
And module, thereby executing various function application and data processing, such as dialog control provided in an embodiment of the present invention is shown
Method.
Memory 102 may include high speed random access memory, may also include nonvolatile memory, such as one or more magnetic
Property storage device, flash memory or other non-volatile solid state memories.Processor 106 and other possible components are to storage
The access of device 102 can carry out under the control of storage control 104.
Various input/output devices are couple processor 106 and memory 102 by Peripheral Interface 108.In some implementations
In example, Peripheral Interface 108, processor 106 and storage control 104 can be realized in one single chip.In some other reality
In example, they can be realized by independent chip respectively.
Radio-frequency module 110 is used to receive and transmit electromagnetic wave, realizes the mutual conversion of electromagnetic wave and electric signal, thus with
Communication network or other equipment are communicated.
Audio-frequency module 112 provides a user audio interface, may include one or more microphones, one or more raises
Sound device and voicefrequency circuit.
Touch Screen 114 provides an output and input interface simultaneously between user terminal 100 and user.Specifically,
Touch Screen 114 shows video output to user, and the content of these videos output may include text, figure, video and its any
Combination.
It is appreciated that structure shown in FIG. 1 is only to illustrate, user terminal 100 may also include it is more than shown in Fig. 1 or
Less component, or with the configuration different from shown in Fig. 1.Each component shown in Fig. 1 can using hardware, software or its
Combination is realized.
Dialog control display methods provided in an embodiment of the present invention can be run in user terminal 100 shown in FIG. 1.
This method is by the way that when receiving first triggering command, the primary dialog box controlled in target dialogue frame control is imitated with the first animation
Fruit shows, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein the mesh
Marking dialog control is obtained based on primary dialog control, and this programme makes primary dialog box and the first background with different
Animation effect is shown, so that user experience improves, and target dialogue frame control is obtained based on primary dialog control
, therefore will not influence the performance of primary dialog box.The dialog control display methods is described in detail below.
Fig. 2 shows a kind of flow charts for dialog control display methods that first embodiment of the invention provides, and please refer to
Fig. 2, the dialog control display methods are run in above-mentioned user terminal, this method comprises:
Step S210 receives first triggering command.
User can issue the first triggering to user terminal by specifying gesture to touch the specified region at user terminal interface
Instruction.
Wherein, specified gesture may include clicking the combination of gesture, pressing gesture or both.
Further, there are many embodiments for clicking gesture, for example, single-point is clicked, multiple spot is clicked, according to default
Rhythm click, clicked according to preset frequency, further, the click of the convolution of single-point and preset rhythm, multiple spot with
The click of the convolution of the click of the convolution of preset rhythm, single-point and preset frequency, the knot of multiple spot and preset frequency
Box-like click also belongs to the range of protection of the embodiment of the present invention.
The embodiment of the pressing gesture also there are many, for example, pressed according to scheduled dynamics, single depression,
Repeatedly pressing etc..
Referring to Fig. 3, if user click the user terminal interface take pictures button when, user terminal receives first herein
Triggering command.
Step S220, the primary dialog box controlled in target dialogue frame control is shown with the first animation effect, and same time control
The first background made in the target dialogue frame control is shown with the second animation effect, wherein the target dialogue frame control is
It is obtained based on primary dialog control, the primary dialog control includes primary dialog box and primary background, described primary
Dialog box and the primary background correspond to primary animation effect.
Wherein, there are many embodiment of the first animation effect and the second animation effect, as an implementation, described
One animation effect include: the control primary dialog box within a preset time from user terminal interface bottom along top-direction gradually
Display.Certainly, first animation effect also may include: the control primary dialog box within a preset time from user terminal
It is gradually shown at the top of interface along bottom direction.
As an implementation, controlling second animation effect includes: to control the transparency of first background to exist
In preset time gradually from large to small.It is gradually become that is, controlling first background from invisible.
Referring to Fig. 3, the primary dialog box in target dialogue frame control is the part 2 that circle is framed in Fig. 3, target pair
Talking about the first background in frame control is the dark background part 1 in Fig. 3.When receiving first triggering command, the target is controlled
Primary dialog box in dialog control gradually shows in 200ms from user terminal interface bottom along top-direction, and simultaneously
The first background in control target dialogue frame control becomes visible until state as shown in Figure 3 from invisible in 200ms.
As an implementation, before when receiving first triggering command, the method also includes: based on primary right
It talks about frame control and obtains target dialogue frame control.
Further, referring to Fig. 4, the step of obtaining target dialogue frame control based on primary dialog control includes:
Step S310, primary dialog box described in the primary dialog control and the primary background is corresponding primary
Animation effect is set off；Set transparent for the primary background.
The primary dialog control that React Native official website provides is Modal, a kind of tool as step S310
The embodiment of body can create an AnimModal.js, using AnimModal.js as target dialogue frame control,
The layout of the target dialogue frame control is returned in render () method.
Render () method is implemented as follows:
< Modal transparent={ true } animationType={ ' none ' }
Visible={ this.state.modalVisible } > </Modal >
The implementation is described in detail below:
Label Modal is the primary dialog control that React Native official website provides.In render () method
It is arranged transparent={ true }, that is, realizes and set transparent for primary background.It is arranged in render () method
AnimationType={ ' none ' } is realized the corresponding primary animation effect setting of primary dialog box and primary background
To close.
Above-mentioned implementation is realized target dialogue frame control by quoting primary dialog control Modal, is inherited all
The attribute of primary dialog control Modal is dialog box truly, will not be because of the dialog box simulated by View
The problem of influencing upper interface View.
The first animation effect is arranged for primary dialog box in step S320.
The first animation effect is set for primary dialog box and is divided into two steps: (1) being that the addition of primary dialog box realizes first
The control Animated.View of animation effect；(2) attribute of the control of the first animation effect is realized, by setting control to control
Make the displaying of primary the first animation effect of dialog box.
It as an implementation, is first below that the first animation effect is realized in the addition of primary dialog box to step (1)
Control Animated.View is described in detail.
It is packaged using Animated.View, is primary dialog box in the inside of above-mentioned target dialogue frame control Modal
The control Animated.View of the first animation effect is realized in addition, and the Style Attributes of control Animated.View are arranged
Style is implemented as follows:
The implementation is described in detail below:
(1) relative position absolute, width are set by the position position of control Animated.View
It is wide that width is set as screen, and bottom:0 is indicated since the bottom of user terminal interface.
(2) transform:[{ translateY:this.translateY }] }] } indicate that the first animation effect is
TranslateY is translateY in the position of vertical direction, controls its change in location by variable translateY.
(3) { this.props.children } indicates the layout code of the target dialogue frame control outside reference, sets in this way
This target dialogue frame control Modal.js can be encapsulated by setting, and not have to be concerned about the actual layout sample of target dialogue frame control
Formula is quoted by this.props.children.
It is individually added into the first animation effect mode by primary dialog box, is reached and the raw animation effect in primary dialog box Central Plains
Consistent effect.By this.props.children mode, the layout pattern code for encapsulating primary dialog box realizes height
Spend suitability, it is only necessary to write the dialogue for specifically needing to realize inside this label < AnimModal > when quoting control
Frame layout code.
Due to when receiving first triggering command, needing to control the primary dialog box in target dialogue frame control with first
Animation effect is shown, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, therefore,
Step (2) realizes the attribute of the control of the first animation effect by setting control, to control primary the first animation effect of dialog box
Displaying embodiment, can with by setting control realize the second animation effect control attribute, to control the first back
Scape puts together to be laid out with the embodiment of the displaying of the second animation effect, come the effect for meeting while controlling.Specific implementation
Code is described in detail subsequent.
First background is added in the primary dialog control, and is arranged for first background by step S330
Corresponding second animation effect.
The implementation of step S330 is divided into two steps: (1) the first background being added in primary dialog control, and is first
The control Animated.View of the second animation effect is realized in background addition；(2) the second animation effect is realized by setting control
The attribute of control, to control the first background with the displaying of the second animation effect.
As an implementation, the first background is added in primary dialog control to step (1) first below, and is
The addition of first background realizes that the control Animated.View of the second animation effect is described in detail.
It is packaged using Animated.View, is that the first background adds in the inside of above-mentioned target dialogue frame control Modal
Add the control Animated.View for realizing the second animation effect, and the Style Attributes of control Animated.View are set
style。
Style=width:width, height:height, backgroundColor: ' rgba (0,0,0,0.7) ',
Opacity:this.opacity } }
It is wide that screen is set by the width width of control Animated.View, sets screen for height height
Height sets rgba (0,0,0,0.7) for the background colour of the first background, the transparency opacity of the first background is set as becoming
Opacity is measured, changes the transparency of the first background by changing the value of variable opacity.Wherein, (0,0,0,0.7) rgba
Corresponding dark background.
When primary dialog box has been added to the control Animated.View of the first animation effect of realization, and the first back
Scape has also been added to the control Animated.View for realizing the second animation effect, at this time can be by being arranged while in control
The mode of two control Animated.View is stated, to realize that the primary dialog box in control target dialogue frame control is dynamic with first
It draws effect to show, and controls the effect that the first background in the target dialogue frame control is shown with the second animation effect simultaneously.
Specific implementation is as follows:
Visible={ this.state.modalVisible } is arranged in render () method to be used to control Modal's
Display.
When modalVisible is true, control Modal is shown, i.e. primary dialogue in control target dialogue frame control
Frame is shown with the first animation effect, and it is aobvious with the second animation effect to control the first background in the target dialogue frame control simultaneously
Show.
Further, write _ open () method shows for controlling Modal.
The realization code of open () method is specific as follows:
Lower mask body is illustrated above-mentioned implementation:
ModalVisible:true, when indicating that modalVisible is set as true, target dialogue frame control is shown.
Animated.timing (this.translateY, { toValue:0, duration:200 }), setting
TranslateY attribute becomes 0 from the value for the dialog box height defaulted, time-consuming 200ms.
Animated.timing (this.opacity, { toValue:1, duration:200 }), setting opacity are saturating
Lightness attribute becomes 1 from 0, time-consuming 200ms.
Animated.timing is that current animation is allowed to execute in a linear fashion, and Animated.parallel is to allow inside
Two linear animations be performed simultaneously.
The effect that above-mentioned code generates allows the first background layer transparency gradually to be become from invisible as it can be seen that same in 200ms
When allow primary dialog box to be gradually displaced to bottom of screen in 200ms by the outside of bottom of screen.
Further, the step of target dialogue frame control being obtained based on primary dialog control further include: be described primary
Third animation effect is arranged in dialog box, and the 4th animation effect is arranged for first background.As an implementation, described
Three animation effects include: that the control primary dialog box is gradually hidden along bottom direction from user terminal interface within a preset time
Hiding.As an implementation, the 4th animation effect includes: to control the transparency of first background within a preset time
Gradually change from small to big.
Wherein, the third animation effect of primary dialog box and the 4th animation effect of the first background are received in user terminal
It is shown when to the second triggering command.
As an implementation, it is the first background constructing user's operation response layer, can be added for first background
The control TouchableOpacity that finger is clicked is responded, and the pattern style of control TouchableOpacity is set.
Style={ { position: ' absolute ', width:width, height:height } } is by the control
The position position of TouchableOpacity is set as relative position ' absolute ', sets screen for width width
Height height is set screen height by width.
Further, the method inspired after control TouchableOpacity is clicked is set:
OnPress={ this._close }
_ close method is inspired after the TouchableOpacity control in the first background is clicked.
Further, should _ the realization code of close method is specific as follows:
Lower mask body is illustrated above-mentioned implementation:
Code logic principle and _ open just on the contrary, the transparency of the first background of control in 200ms gradually from
Become invisible, and controls the outside that primary dialog box is gradually displaced to bottom of screen by bottom of screen in 200ms simultaneously, away from
From for dialogheight.
Also, setting, when modalVisible is false, calling _ close method control Modal hides, that is, controls
Primary dialog box in the target dialogue frame control is hidden with third animation effect, and controls the target dialogue frame control simultaneously
The first background in part is hidden with the 4th animation effect.
As an implementation, referring to Fig. 5, the method also includes:
Step S410 receives the second triggering command.
User can issue the second triggering to user terminal and refer to by specifying gesture to touch the specified region of the first background
It enables.The embodiment of specified gesture specifies the embodiment of gesture similar with step S210, and details are not described herein again.
Step S420 is controlled the primary dialog box in the target dialogue frame control and is hidden with third animation effect, and same
When control the first background in the target dialogue frame control with the 4th animation effect hide.
When receiving the second triggering command, triggering responds the control TouchableOpacity that finger is clicked, so that the control
TouchableOpacity inspires calling _ close method after being clicked, to realize the original in control target dialogue frame control
Raw dialog box is hidden with third animation effect, and controls the first background in target dialogue frame control simultaneously with the 4th animation effect
It hides.
Dialog control display methods provided in an embodiment of the present invention, by controlling when receiving first triggering command
Primary dialog box in target dialogue frame control is shown with the first animation effect, and is controlled in the target dialogue frame control simultaneously
The first background shown with the second animation effect, wherein the target dialogue frame control be based on primary dialog control obtain
, this programme shows that primary dialog box and the first background with different animation effects, so that user experience improves, and
And target dialogue frame control is the performance for being obtained based on primary dialog control, therefore will not influence primary dialog box.Pass through
First background is individually added into the second animation effect, the primary animation for avoiding primary dialog control Modal directly influences
First background causes the consequence of experience difference.The first background joined touch-control response code simultaneously, improve primary dialog control
The experience effect of primary background in Modal.By setting animation in synchronization execute, allow the first background transparency and dialog box position
It moves animation in synchronization to execute, reaches the fluency of this control animation effect, enhance user experience.
Referring to Fig. 6, being the functional module signal for the dialog control display device 500 that second embodiment of the invention provides
Figure.The dialog control display device 500 includes display module 510.
Display module 510, for controlling the primary dialogue in target dialogue frame control when receiving first triggering command
Frame is shown with the first animation effect, and it is aobvious with the second animation effect to control the first background in the target dialogue frame control simultaneously
Show, wherein the target dialogue frame control is obtained based on primary dialog control, and the primary dialog control includes original
Raw dialog box and primary background, the primary dialog box and the primary background correspond to primary animation effect.
As an implementation, described device can also include configuration device 520, be used for the primary dialog box control
Primary dialog box described in part and the corresponding primary animation effect of the primary background are set off；The primary background is set
It is set to transparent；For the primary dialog box, first animation effect is set；Described in being added in the primary dialog control
First background, and corresponding second animation effect is set for first background.
Further, the configuration device 520 is also used to that third animation effect is arranged for the primary dialog box, for institute
It states the first background and the 4th animation effect is set.
As an implementation, the display module 510, is also used to when receiving the second triggering command, controls institute
It states the primary dialog box in target dialogue frame control to hide with third animation effect, and controls the target dialogue frame control simultaneously
In the first background with the 4th animation effect hide.
As an implementation, first animation effect includes: to control the primary dialog box within a preset time
It is gradually shown from user terminal interface bottom along top-direction.
As an implementation, second animation effect includes: to control the transparency of first background default
In time gradually from large to small.
As an implementation, the third animation effect includes: to control the primary dialog box within a preset time
It is gradually hidden from user terminal interface along bottom direction.
As an implementation, the 4th animation effect includes: to control the transparency of first background default
Gradually change from small to big in time.
Above each module can be by software code realization, at this point, above-mentioned each module can be stored in user terminal 100
In memory 102.Above each module can equally be realized by hardware such as IC chip.
Third embodiment of the invention provides a kind of user terminal, and the user terminal includes memory and processor, institute
State memory and be couple to the processor, the memory store instruction, when executed by the processor so that
The processor executes following operation:
When receiving first triggering command, the primary dialog box in target dialogue frame control is controlled with the first animation effect
It has been shown that, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein the target
Dialog control is obtained based on primary dialog control, and the primary dialog control includes primary dialog box and primary back
Scape, the primary dialog box and the primary background correspond to primary animation effect.
It should be noted that all the embodiments in this specification are described in a progressive manner, each embodiment weight
Point explanation is the difference from other embodiments, and the same or similar parts between the embodiments can be referred to each other.
The technical effect of dialog control display device provided by the embodiment of the present invention, realization principle and generation is with before
It is identical to state embodiment of the method, to briefly describe, Installation practice part does not refer to place, can refer to phase in preceding method embodiment
Answer content.
In several embodiments provided herein, it should be understood that disclosed device and method can also pass through
Other modes are realized.The apparatus embodiments described above are merely exemplary, for example, flow chart and block diagram in attached drawing
Show the device of multiple embodiments according to the present invention, the architectural framework in the cards of method and computer program product,
Function and operation.In this regard, each box in flowchart or block diagram can represent the one of a module, section or code
Part, a part of the module, section or code, which includes that one or more is for implementing the specified logical function, to be held
Row instruction.It should also be noted that function marked in the box can also be to be different from some implementations as replacement
The sequence marked in attached drawing occurs.For example, two continuous boxes can actually be basically executed in parallel, they are sometimes
It can execute in the opposite order, this depends on the function involved.It is also noted that every in block diagram and or flow chart
The combination of box in a box and block diagram and or flow chart can use the dedicated base for executing defined function or movement
It realizes, or can realize using a combination of dedicated hardware and computer instructions in the system of hardware.
In addition, each functional module in each embodiment of the present invention can integrate one independent portion of formation together
Point, it is also possible to modules individualism, an independent part can also be integrated to form with two or more modules.
It, can be with if the function is realized and when sold or used as an independent product in the form of software function module
It is stored in a computer readable storage medium.Based on this understanding, technical solution of the present invention is substantially in other words
The part of the part that contributes to existing technology or the technical solution can be embodied in the form of software products, the meter
Calculation machine software product is stored in a storage medium, including some instructions are used so that a computer equipment (can be a
People's computer, server or network equipment etc.) it performs all or part of the steps of the method described in the various embodiments of the present invention.
And storage medium above-mentioned includes: USB flash disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), arbitrary access
The various media that can store program code such as memory (RAM, Random Access Memory), magnetic or disk.It needs
It is noted that herein, such as first and the relational terms of third or the like be used merely to an entity or operation
It is distinguished with another entity or operation, without necessarily requiring or implying between these entities or operation, there are any this
Actual relationship or sequence.Moreover, the terms "include", "comprise" or its any other variant are intended to nonexcludability
It include so that the process, method, article or equipment for including a series of elements not only includes those elements, but also to wrap
Include other elements that are not explicitly listed, or further include for this process, method, article or equipment intrinsic want
Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including described want
There is also other identical elements in the process, method, article or equipment of element.
The foregoing is only a preferred embodiment of the present invention, is not intended to restrict the invention, for the skill of this field
For art personnel, the invention may be variously modified and varied.All within the spirits and principles of the present invention, made any to repair
Change, equivalent replacement, improvement etc., should all be included in the protection scope of the present invention.It should also be noted that similar label and letter exist
Similar terms are indicated in following attached drawing, therefore, once being defined in a certain Xiang Yi attached drawing, are then not required in subsequent attached drawing
It is further defined and explained.
The above description is merely a specific embodiment, but scope of protection of the present invention is not limited thereto, any
Those familiar with the art in the technical scope disclosed by the present invention, can easily think of the change or the replacement, and should all contain
Lid is within protection scope of the present invention.Therefore, protection scope of the present invention should be subject to the protection scope in claims.
Claims (9)
1. a kind of dialog control display methods, which is characterized in that the described method includes:
When receiving first triggering command, it is aobvious with the first animation effect to control the primary dialog box in target dialogue frame control
Show, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein based on primary right
The process that words frame control obtains the target dialogue frame control includes: that first back is added in the primary dialog control
Scape, and be the control of first background addition realization, second animation effect, the primary dialog control includes described
Primary dialog box and primary background, the primary dialog box and the primary background correspond to primary animation effect；
And it is described be added first background in the primary dialog control, and realized for first background addition
The control of second animation effect, further includes:
Before when receiving the first triggering command, by primary dialog box described in the primary dialog control and described
The corresponding primary animation effect of primary background is set off；
Set transparent for the primary background；
For the primary dialog box, first animation effect is set；
First background is added in the primary dialog control, and is first background setting corresponding described second
Animation effect.
2. the method according to claim 1, wherein corresponding second animation effect is arranged for first background
Later, the method also includes:
Third animation effect is set for the primary dialog box, the 4th animation effect is set for first background.
3. according to the method described in claim 2, it is characterized in that, the method also includes:
When receiving the second triggering command, the primary dialog box in the target dialogue frame control is controlled with third animation effect
It hides, and controls the first background in the target dialogue frame control simultaneously and hidden with the 4th animation effect.
4. according to the method in any one of claims 1 to 3, which is characterized in that first animation effect includes: control
The primary dialog box is gradually shown from user terminal interface bottom along top-direction within a preset time.
5. according to the method in any one of claims 1 to 3, which is characterized in that second animation effect includes: control
The transparency of first background is within a preset time gradually from large to small.
6. according to the method in claim 2 or 3, which is characterized in that the third animation effect includes: that control is described primary
Dialog box is gradually hidden from user terminal interface along bottom direction within a preset time.
7. according to the method in claim 2 or 3, which is characterized in that the 4th animation effect includes: control described first
The transparency of background is gradually changed from small to big within a preset time.
8. a kind of dialog control display device, which is characterized in that described device includes:
Display module controls the primary dialog box in target dialogue frame control with for when receiving first triggering command
One animation effect is shown, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect,
In, it include: in the primary dialog control based on the process that primary dialog control obtains the target dialogue frame control
First background is added, and realizes the control of second animation effect, the primary dialogue for first background addition
Frame control includes the primary dialog box and primary background, and the primary dialog box and the primary background correspond to primary animation
Effect；
And it is described be added first background in the primary dialog control, and realized for first background addition
The control of second animation effect, further includes:
Before when receiving the first triggering command, by primary dialog box described in the primary dialog control and described
The corresponding primary animation effect of primary background is set off；
Set transparent for the primary background；
For the primary dialog box, first animation effect is set；
First background is added in the primary dialog control, and is first background setting corresponding described second
Animation effect.
9. a kind of user terminal, which is characterized in that the user terminal includes processor and memory, the memory coupling
To the processor, the memory store instruction when executed by the processor holds the user terminal
The following operation of row:
When receiving first triggering command, it is aobvious with the first animation effect to control the primary dialog box in target dialogue frame control
Show, and the first background controlled in the target dialogue frame control simultaneously is shown with the second animation effect, wherein based on primary right
The process that words frame control obtains the target dialogue frame control includes: that first back is added in the primary dialog control
Scape, and be the control of first background addition realization, second animation effect, the primary dialog control includes described
Primary dialog box and primary background, the primary dialog box and the primary background correspond to primary animation effect；
And it is described be added first background in the primary dialog control, and realized for first background addition
The control of second animation effect, further includes:
Before when receiving the first triggering command, by primary dialog box described in the primary dialog control and described
The corresponding primary animation effect of primary background is set off；
Set transparent for the primary background；
For the primary dialog box, first animation effect is set；
First background is added in the primary dialog control, and is first background setting corresponding described second
Animation effect.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710346723.0A CN107168606B (en) | 2017-05-12 | 2017-05-12 | Dialog control display methods, device and user terminal |
| PCT/CN2017/112162 WO2018205548A1 (en) | 2017-05-12 | 2017-11-21 | Dialog box control display method and device, readable storage medium, and user terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710346723.0A CN107168606B (en) | 2017-05-12 | 2017-05-12 | Dialog control display methods, device and user terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107168606A CN107168606A (en) | 2017-09-15 |
| CN107168606B true CN107168606B (en) | 2019-05-17 |
Family
ID=59815310
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710346723.0A Active CN107168606B (en) | 2017-05-12 | 2017-05-12 | Dialog control display methods, device and user terminal |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107168606B (en) |
| WO (1) | WO2018205548A1 (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107168606B (en) * | 2017-05-12 | 2019-05-17 | 武汉斗鱼网络科技有限公司 | Dialog control display methods, device and user terminal |
| CN108234903B (en) * | 2018-01-30 | 2020-05-19 | 广州市百果园信息技术有限公司 | Interactive special effect video processing method, medium and terminal equipment |
| CN115291759A (en) * | 2022-07-28 | 2022-11-04 | 北京字跳网络技术有限公司 | Information processing method and device and electronic equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101706704A (en) * | 2009-11-06 | 2010-05-12 | 谢达 | Method for displaying user interface capable of automatically changing opacity |
| CN106250153A (en) * | 2016-08-01 | 2016-12-21 | 乐视控股（北京）有限公司 | A kind of user interface control method and equipment |
| CN106547571A (en) * | 2016-11-30 | 2017-03-29 | 北京酷我科技有限公司 | A kind of cardon display packing that can customize |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5550967A (en) * | 1993-01-27 | 1996-08-27 | Apple Computer, Inc. | Method and apparatus for generating and displaying visual cues on a graphic user interface |
| SG87065A1 (en) * | 1998-12-16 | 2002-03-19 | Ibm | Method and apparatus for protecting controls in graphic user interfaces of computer systems |
| CN104298510B (en) * | 2014-09-30 | 2017-08-25 | 珠海市君天电子科技有限公司 | A kind of animation method and device for realizing control button locking |
| US10643023B2 (en) * | 2015-09-25 | 2020-05-05 | Oath, Inc. | Programmatic native rendering of structured content |
| CN107168606B (en) * | 2017-05-12 | 2019-05-17 | 武汉斗鱼网络科技有限公司 | Dialog control display methods, device and user terminal |
-
2017
- 2017-05-12 CN CN201710346723.0A patent/CN107168606B/en active Active
- 2017-11-21 WO PCT/CN2017/112162 patent/WO2018205548A1/en active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101706704A (en) * | 2009-11-06 | 2010-05-12 | 谢达 | Method for displaying user interface capable of automatically changing opacity |
| CN106250153A (en) * | 2016-08-01 | 2016-12-21 | 乐视控股（北京）有限公司 | A kind of user interface control method and equipment |
| CN106547571A (en) * | 2016-11-30 | 2017-03-29 | 北京酷我科技有限公司 | A kind of cardon display packing that can customize |
Non-Patent Citations (1)
| Title |
|---|
| 《react native 使用详解》;老孟的博客;《https://blog.csdn.net/mengks1987/article/details/71422970》;20170508 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107168606A (en) | 2017-09-15 |
| WO2018205548A1 (en) | 2018-11-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107957831B (en) | Data processing method, device and processing equipment for displaying interface content | |
| TWI697866B (en) | Method and device for implementing color tweening animation | |
| CN110489116A (en) | A kind of rendering method of the page, device and computer storage medium | |
| CN105518614B (en) | Method, equipment and the computer-readable medium of screen recording for multi-screen application program | |
| CN109460276A (en) | The page and page configuration document generating method, device, terminal device and medium | |
| CN111240777B (en) | Dynamic wallpaper generation method and device, storage medium and electronic equipment | |
| CN108664296A (en) | A kind of page rendering method and apparatus, a kind of page processing method and device | |
| CN108280119A (en) | Page generation method, device and user terminal | |
| US11481948B2 (en) | Method, device and storage medium for generating animation group by synthesizing animation layers based on tree structure relation between behavior information and sub-behavior information | |
| CN107168606B (en) | Dialog control display methods, device and user terminal | |
| CN107122175B (en) | Interface creating method and device | |
| CN105512187B (en) | Information display method and information display device based on display picture | |
| CN109254801A (en) | Starting, configuration method, device, equipment, medium and operating system | |
| WO2015018299A1 (en) | Method and device for implementing a user interface | |
| CN109698914A (en) | A kind of lightning special efficacy rendering method, device, equipment and storage medium | |
| CN107077347B (en) | View management architecture | |
| CN104899038A (en) | Interface style transformation method and device | |
| CN109391848A (en) | A kind of interactive advertisement system | |
| CN114730231A (en) | Techniques for virtual try-on of an item | |
| CN105760420B (en) | Realize the method and device with multimedia file content interaction | |
| CN105739936B (en) | A kind of user terminal control method and user terminal | |
| CN109766155A (en) | A kind of bullet frame generation method, device and storage medium | |
| KR102184162B1 (en) | System and method for producing reactive webtoons | |
| CN107239212A (en) | Segmentation selection view rendering method, device and user terminal | |
| CN108319406A (en) | Desktop icon display method, device and computer readable 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |