WO2018205548A1 - 对话框控件显示方法、装置、可读存储介质及用户终端 - Google Patents

对话框控件显示方法、装置、可读存储介质及用户终端 Download PDF

Info

Publication number
WO2018205548A1
WO2018205548A1 PCT/CN2017/112162 CN2017112162W WO2018205548A1 WO 2018205548 A1 WO2018205548 A1 WO 2018205548A1 CN 2017112162 W CN2017112162 W CN 2017112162W WO 2018205548 A1 WO2018205548 A1 WO 2018205548A1
Authority
WO
WIPO (PCT)
Prior art keywords
native
control
dialog
animation effect
background
Prior art date
Application number
PCT/CN2017/112162
Other languages
English (en)
French (fr)
Inventor
成文驰
陈少杰
张文明
Original Assignee
武汉斗鱼网络科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 武汉斗鱼网络科技有限公司 filed Critical 武汉斗鱼网络科技有限公司
Publication of WO2018205548A1 publication Critical patent/WO2018205548A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • 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

Definitions

  • the present invention relates to the field of computer applications, and in particular, to a dialog box display method, apparatus, readable storage medium, and user terminal.
  • the native dialog provided by the official React Native website includes a native dialog and a native background.
  • the native background is a dark background, and the native dialog and the native background correspond to the same native animation. Therefore, when the user terminal receives the trigger instruction of the user, the native dialog box and the native background are controlled to slide from the bottom of the user terminal to the user terminal interface according to the same original animation effect, so that the user experience is not good.
  • an object of the embodiments of the present invention is to provide a dialog box display method, apparatus, readable storage medium, and user terminal to solve the above problems.
  • an embodiment of the present invention provides a dialog box display method, where the method includes: when receiving the first trigger instruction, controlling a native dialog box in the target dialog box control to display the first animation effect, and Simultaneously controlling the first background in the target dialog control to be displayed in a second animation effect, wherein the target dialog control is obtained based on a native dialog control, where the native dialog control includes a native dialog and a native background. Both the native dialog and the native background correspond to native animation effects.
  • the embodiment of the present invention provides a dialog box display device, where the device includes: a display module, configured to control a native dialog box in the target dialog box control to receive the first trigger instruction An animation effect display, and simultaneously controlling a first background in the target dialog control to be displayed in a second animation effect, wherein the target dialog control is obtained based on a native dialog control, and the native dialog control includes a native The dialog box and the native background, the native dialog box and the native background correspond to the native animation effect.
  • an embodiment of the present invention provides a readable storage medium, where the readable storage medium includes a set of instructions that, when executed, cause at least one processor to perform the third aspect of the embodiments of the present invention.
  • an embodiment of the present invention provides a user terminal, where the user terminal includes a memory and a processor, the memory is coupled to the processor, and the memory stores an instruction when the instruction is processed by the When executed, the processor is caused to perform the following operations: when receiving the first trigger instruction, control the native pair in the target dialog control
  • the dialog box is displayed with the first animation effect, and simultaneously controls the first background in the target dialog box control to be displayed by the second animation effect, wherein the target dialog box control is obtained based on the native dialog box control, the native
  • the dialog control includes a native dialog and a native background, and the native dialog and the native background correspond to native animation effects.
  • a dialog box display display method, apparatus, readable storage medium and user terminal control a native dialogue in a target dialog box control when receiving a first trigger instruction.
  • the box is displayed with the first animation effect, and simultaneously controls the first background in the target dialog control to be displayed by the second animation effect, wherein the target dialog control is obtained based on the native dialog control, and the scheme makes the original
  • the dialog and the first background are displayed with different animation effects, which makes the user experience better, and the target dialog control is based on the native dialog control, so it does not affect the performance of the native dialog.
  • FIG. 1 is a structural block diagram of a user terminal according to an embodiment of the present invention.
  • FIG. 2 is a flowchart of a method for displaying a dialog box according to a first embodiment of the present invention.
  • FIG. 3 is a schematic diagram of a dialog box display method according to a first embodiment of the present invention.
  • FIG. 4 is a flow chart of a first part of a method for displaying a dialog box according to a first embodiment of the present invention.
  • FIG. 5 is a flow chart of a second part of a method for displaying a dialog box according to a first embodiment of the present invention.
  • FIG. 6 is a structural block diagram of a dialog box display device according to a second embodiment of the present invention.
  • FIG. 1 shows a block diagram of a structure of a user terminal 100 that can be applied to an embodiment of the present invention.
  • the user terminal 100 includes a memory 102, a memory controller 104, one or more (only one shown) processor 106, peripheral interface 108, radio frequency module 110, audio module 112, touch screen. 114 and so on. These components communicate with one another via one or more communication bus/signal lines 116.
  • the memory 102 can be used to store software programs and modules, such as a dialog control display method and a program instruction/module corresponding to the device in the embodiment of the present invention.
  • the processor 106 executes each of the software programs and modules stored in the memory 102.
  • a functional application and data processing such as a dialog control display method provided by an embodiment of the present invention.
  • Memory 102 can include high speed random access memory and can also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 102 by the processor 106 and other possible components can be performed under the control of the memory controller 104.
  • non-volatile memory such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 102 by the processor 106 and other possible components can be performed under the control of the memory controller 104.
  • Peripheral interface 108 couples various input/input devices to processor 106 and memory 102.
  • peripheral interface 108, processor 106, and memory controller 104 can be implemented in a single chip. In other instances, they can be implemented by separate chips.
  • the radio frequency module 110 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.
  • the audio module 112 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.
  • the touch screen 114 provides an output and input interface simultaneously between the user terminal 100 and the user.
  • the touch screen 114 displays video output to the user, and the content of the video output may include text, graphics, video, and any combination thereof.
  • FIG. 1 is merely illustrative, and the user terminal 100 may further include more or less components than those shown in FIG. 1, or have a different configuration from that shown in FIG. 1.
  • the components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.
  • the dialog box display method provided by the embodiment of the present invention can be run in the user terminal 100 shown in FIG. 1.
  • the method includes: when receiving the first triggering instruction, controlling a native dialog box in the target dialog box control to display the first animation effect, and simultaneously controlling the first background in the target dialog box control to display the second animation effect , wherein the target dialog control is obtained based on a native dialog control.
  • This scheme makes the native dialog and the first background display with different animation effects, which makes the user experience better, and the target dialog control is obtained based on the native dialog control, so it does not affect the performance of the native dialog.
  • the dialog control display method will be described in detail below.
  • FIG. 2 is a flowchart of a method for displaying a dialog box according to a first embodiment of the present invention.
  • the dialog box display method is implemented in the user terminal, and the method includes:
  • Step S210 receiving a first trigger instruction.
  • the user can touch the designated area of the user terminal interface by specifying a gesture to issue a first trigger instruction to the user terminal.
  • the specified gesture may include a click gesture, a press gesture, or a combination of the two.
  • the click gesture is implemented in various manners, for example, single click, multiple clicks, click according to a preset rhythm, click according to a preset frequency, optional, single point and preset rhythm Combined click, multi-point combined with preset rhythm click, combined click of single point and preset frequency, combined click of multi-point and preset frequency also belong to embodiment of the present invention
  • the scope of protection for example, single click, multiple clicks, click according to a preset rhythm, click according to a preset frequency, optional, single point and preset rhythm Combined click, multi-point combined with preset rhythm click, combined click of single point and preset frequency, combined click of multi-point and preset frequency also belong to embodiment of the present invention The scope of protection.
  • pressing gesture for example, pressing according to a predetermined force, a single pressing, multiple pressing, and the like.
  • the user terminal interface includes a camera button. If the user clicks the camera button of the user terminal interface, the user terminal receives the first trigger command at the position of the touch screen where the camera button is located.
  • Step S220 the native dialog box in the control target dialog box control is displayed in the first animation effect, and simultaneously controls the first background in the target dialog box control to be displayed in the second animation effect, wherein the target dialog box control is Based on the native dialog control, the native dialog control includes a native dialog and a native background, and the native dialog and the native background correspond to native animation effects.
  • the first animation effect includes: controlling the native dialog box to gradually extend from the bottom of the user terminal interface along the top direction within a preset time. display.
  • the first animation effect may also include: controlling the native dialog box to be gradually displayed from the top of the user terminal interface in the bottom direction in a preset time; or, in other embodiments, the first animation effect may also include: The native dialog box is controlled to be gradually displayed from the left side of the user terminal in the right direction within a predetermined time, or the native dialog box is controlled to be gradually displayed from the right side of the user terminal in the left direction within a predetermined time.
  • controlling the second animation effect includes: controlling the transparency of the first background to gradually decrease from large to large within a preset time. That is to say, the first background is controlled to become visible from invisible or the visibility is low and gradually becomes high in visibility.
  • the native dialog box in the target dialog control is part 2 of the circle enclosed in FIG. 3, and the first background in the target dialog control is the dark background portion 1 in FIG.
  • the native dialog box in the control target dialog control is gradually displayed from the bottom of the user terminal interface in the top direction within 200 ms, and simultaneously controls the first background in the target dialog control within 200 ms. Invisible becomes visible until the state is as shown in FIG.
  • the method before receiving the first trigger instruction, the method further includes: obtaining a target dialog control based on the native dialog control.
  • the steps of obtaining a target dialog control based on the native dialog control include:
  • Step S310 setting the native dialog box in the native dialog control and the native animation effect corresponding to the native background to be closed; setting the native background to be transparent.
  • step S310 The native dialog control provided by React Native official website is Modal.
  • the render() method is implemented as follows:
  • the label Modal is a native dialog control for the official React Native website.
  • Setting animationType ⁇ 'none' ⁇ in the render() method sets the native animation effect corresponding to the native dialog and the native background to off.
  • the above implementation method implements the target dialog control by referring to the native dialog control Modal, inherits the properties of all the native dialog control Modal, is a true dialog box, and does not affect the upper interface view due to the dialog box simulated by the View. The problem.
  • Step S320 setting a first animation effect for the native dialog box.
  • Setting the first animation effect for the native dialog can be divided into two steps: (1) adding the control Animated.View that implements the first animation effect to the native dialog; (2) setting the properties of the control that implements the first animation effect by setting the control To control the display of the first animation effect of the native dialog.
  • step (1) first adds a control Animated.View that implements the first animation effect to the native dialog box.
  • Enposited.View is used for encapsulation.
  • the control Animated.View that implements the first animation effect is added to the native dialog box, and the style attribute style of the control Animated.View is set.
  • the specific implementation is as follows:
  • the position of the control Animated.View is set to the relative position absolute, the width width is set to the screen width, and bottom: 0 means starting from the bottom of the user terminal interface.
  • this.props.children means to reference the layout code of the external target dialog control, so that the target dialog control Modal.js can be packaged without regard to the actual layout style of the target dialog control. This.props.children can be referenced.
  • the first animation effect mode is added separately through the native dialog box to achieve the same effect as the native animation effect in the native dialog box.
  • the layout style code that encapsulates the native dialog box achieves a high degree of adaptability. You only need to write the dialog layout code that needs to be implemented inside this tag ⁇ AnimModal> when referring to the control.
  • Step (2) controls the implementation of the first animation effect display of the native dialog box by setting the property of the control that controls the first animation effect, and can control the property of the control that implements the second animation effect by setting the control.
  • the first background is laid out in an embodiment of the second animation effect presentation to satisfy the effects of simultaneous control.
  • Step S330 adding the first background to the native dialog control, and setting a corresponding second animation effect for the first background.
  • step S330 is divided into two steps: (1) adding a first background to the native dialog control, and adding an animation Animated.View to implement the second animation effect for the first background; (2) implementing the second by setting control The properties of the animated control to control the display of the first background with the second animation effect.
  • step (1) first adds a first background to the native dialog control, and adds a second animation effect control Animated.View to the first background for detailed description.
  • the control Animated.View is used for encapsulation.
  • a control Animated.View that implements the second animation effect is added for the first background, and the style attribute style of the control Animated.View is set.
  • Style ⁇ width:width,height:height,backgroundColor:'rgba(0,0,0,0.7)',opacity:this.opacity ⁇
  • rgba (0,0,0,0.7) corresponds to a dark background.
  • the view mode is used to implement the first animation effect display in the control target dialog control, and simultaneously control the effect of the first animation in the target dialog control with the second animation effect.
  • the Modal display is controlled, that is, the native dialog box in the control target dialog control is displayed with the first animation effect, and at the same time, the first background in the target dialog control is controlled to display the second animation effect.
  • write _open() method is used to control the Modal display.
  • the implementation code of the open() method is as follows:
  • modalVisible true, indicating that the target dialog control is displayed when modalVisible is set to true.
  • Animated.timing (this.opacity, ⁇ toValue:1,duration:200 ⁇ ), set the opacity transparency property from 0 to 1, which takes 200ms.
  • Animated.timing is to let the current animation execute in a linear manner.
  • Animated.parallel is to let the two inner linear animations execute simultaneously.
  • the above code produces an effect that causes the first background layer transparency to gradually become visible from invisible within 200ms, while allowing the native dialog to be gradually displaced from the outside of the bottom of the screen to the bottom of the screen within 200ms.
  • the step of obtaining the target dialog control based on the native dialog control further comprises: setting a third animation effect for the native dialog box, and setting a fourth animation effect for the first background.
  • the third animation effect includes: controlling the native dialog box to gradually hide from the user terminal interface in a bottom direction within a preset time
  • the third animation effect may also be implemented by other methods, for example, in other
  • the third animation effect may further include: controlling the native dialog box from the user terminal boundary within a preset time The surface is gradually hidden along the top direction, or the native dialog box is gradually hidden from the user terminal interface in the left direction within a preset time, or the native dialog box is controlled from the user terminal interface in the right direction within a preset time. Gradually hidden.
  • the fourth animation effect includes: controlling the transparency of the first background to gradually increase from small to small within a preset time.
  • the third animation effect of the native dialog box and the fourth animation effect of the first background are displayed when the user terminal receives the second trigger instruction.
  • a user operation response layer is constructed for the first background, and a touchable Opacity that responds to a finger click may be added to the first background, and a style of the touchable Opacity of the control may be set.
  • Style ⁇ position:'absolute',width:width,height:height ⁇
  • the logic principle of the code is opposite to _open.
  • the transparency of the first background is gradually changed from visible to invisible within 200ms, and at the same time, the control native dialog is gradually shifted to the outside of the bottom of the screen within 200ms from the bottom of the screen, and the distance is dialogheight.
  • the _close method is called to control the Modal hiding, that is, the native dialog in the target dialog control is controlled to be hidden by the third animation effect, and the target dialog control is simultaneously controlled.
  • the first background is hidden by the fourth animation effect.
  • the method further includes:
  • Step S410 receiving a second trigger instruction.
  • the user can touch the designated area of the first background by specifying a gesture to issue a second trigger instruction to the user terminal.
  • the implementation manner of the specified gesture is similar to the implementation manner of the gesture specified in step S210, and details are not described herein again.
  • Step S420 controlling the native dialog box in the target dialog box control to be hidden by the third animation effect, and simultaneously controlling the first background in the target dialog box control to be hidden by the fourth animation effect.
  • the dialog box control display method when receiving the first trigger instruction, controls the native dialog box in the target dialog box control to display the first animation effect, and simultaneously controls the target dialog box control
  • the first background is displayed by a second animation effect, wherein the target dialog control is obtained based on a native dialog control, and the scheme causes the native dialog and the first background to be displayed with different animation effects, so that the user experience is better.
  • the target dialog control is based on the native dialog control, so it does not affect the performance of the native dialog.
  • the first background adds touch response code, which improves the experience of the native background in the native dialog control Modal.
  • the animation By setting the animation to execute synchronously, the transparency of the first background and the dialog displacement animation are synchronized, and the animation of the control is smoothed, which enhances the user experience.
  • FIG. 6 is a functional block diagram of a dialog control display device 500 according to a second embodiment of the present invention.
  • the dialog control display device 500 includes a display module 510.
  • the display module 510 is configured to: when receiving the first triggering instruction, control the native dialog box in the target dialog box control to display the first animation effect, and simultaneously control the first background in the target dialog box control to the second animation effect.
  • the display wherein the target dialog control is obtained based on a native dialog control, the native dialog control includes a native dialog and a native background, and the native dialog and the native background correspond to a native animation effect.
  • the dialog box display device 500 may further include a configuration module 520, configured to set the native dialog box in the native dialog box control and the native animation effect corresponding to the native background to be closed; Setting the native background to be transparent; setting the first animation effect for the native dialog; adding the first background to the native dialog control, and setting a second corresponding to the first background Animation effect.
  • a configuration module 520 configured to set the native dialog box in the native dialog box control and the native animation effect corresponding to the native background to be closed; Setting the native background to be transparent; setting the first animation effect for the native dialog; adding the first background to the native dialog control, and setting a second corresponding to the first background Animation effect.
  • configuration module 520 is further configured to set a third animation effect for the native dialog box, and set a fourth animation effect for the first background.
  • the display module 510 is further configured to control the target when receiving the second triggering instruction.
  • the native dialog in the standard dialog control is hidden by the third animation effect, and at the same time controls the first background in the target dialog control to be hidden by the fourth animation effect.
  • the first animation effect includes: controlling the native dialog box to be gradually displayed from the bottom of the user terminal interface in the top direction in a preset time.
  • the first animation effect may also include: The native dialog box is controlled to be gradually displayed from the left side of the user terminal in the right direction within a predetermined time, or the native dialog box is controlled to be gradually displayed from the right side of the user terminal in the left direction within a predetermined time.
  • the second animation effect includes: controlling the transparency of the first background to gradually decrease from large to large within a preset time.
  • the third animation effect includes: controlling the native dialog box to gradually hide from the user terminal interface in a bottom direction within a preset time
  • the third animation effect may also be implemented by other methods, for example, in other
  • the third animation effect may further include: controlling the native dialog to gradually hide from the user terminal interface in a top direction within a preset time, or controlling the native dialog to be from the user terminal interface within a preset time The left direction is gradually hidden, or the native dialog is controlled to be gradually hidden from the user terminal interface in the right direction within a preset time.
  • the fourth animation effect includes: controlling the transparency of the first background to gradually increase from small to small within a preset time.
  • Each of the above modules may be implemented by software code.
  • each of the above modules may be stored in the memory 102 of the user terminal 100.
  • the above modules can also be implemented by hardware such as an integrated circuit chip.
  • a third embodiment of the present invention provides a user terminal, the user terminal including a memory and a processor, the memory coupled to the processor, the memory storing an instruction when the instruction is executed by the processor When the processor is caused to do the following:
  • the native dialog box in the control target dialog box control is displayed with the first animation effect, and simultaneously controls the first background in the target dialog box control to display the second animation effect, wherein
  • the target dialog control is obtained based on a native dialog control, the native dialog control includes a native dialog and a native background, and the native dialog and the native background correspond to a native animation effect.
  • a fourth embodiment of the present invention provides a readable storage medium, the readable storage medium comprising a set of instructions, when executed, causing at least one processor to execute a dialog control provided by the first embodiment of the present invention Display method.
  • the dialog box display device provided by the embodiment of the present invention has the same implementation principle and technical effects as those of the foregoing method embodiment.
  • the device embodiment does not mention any part, and reference may be made to the corresponding method embodiment. content.
  • each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings.
  • each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.
  • each functional module in each embodiment of the present invention may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.
  • the functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium.
  • the technical solution of the present invention which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including
  • the instructions are used to cause a computer device (which may be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present invention.
  • the foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. .
  • the present application solves the problem that the existing native dialog box and the original background animation have a single effect, greatly improving the attraction and user experience of the native dialog box and the native background to the viewer, and has great practical value.

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

一种对话框控件显示方法、装置、可读存储介质及用户终端，所述方法包括：接收第一触发指令（S210），控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件基于原生对话框控件获得，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果（S220）。原生对话框及第一背景以不同的动画效果进行显示，使得用户体验变好，并且目标对话框控件是基于原生对话框控件获得的，因此不会影响原生对话框的性能。

Description

对话框控件显示方法、装置、可读存储介质及用户终端
本申请要求于2017年5月12日提交中国专利局的申请号为2017103467230、名称为“对话框控件显示方法、装置及用户终端”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本发明涉及计算机应用领域，具体而言，涉及一种对话框控件显示方法、装置、可读存储介质及用户终端。
背景技术
由React Native官方网站提供的原生对话框控件中包括了原生对话框及原生背景，该原生背景为暗色背景，并且该原生对话框及该原生背景均对应同一个原生动画效果。因此，当用户终端接收到用户的触发指令时，会控制该原生对话框及该原生背景均按照同一个原生动画效果一起从用户终端的底部滑入用户终端界面，使得用户体验不佳。
发明内容
有鉴于此，本发明实施例的目的在于提供一种对话框控件显示方法、装置、可读存储介质及用户终端，以解决上述问题。
为了实现上述目的，本发明实施例采用的技术方案如下：
第一方面，本发明实施例提供了一种对话框控件显示方法，所述方法包括：当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件基于原生对话框控件获得，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
第二方面，本发明实施例提供了一种对话框控件显示装置，所述装置包括：显示模块，用于当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
第三方面，本发明实施例提供了一种可读存储介质，所述可读存储介质包括一组指令，当执行所述指令时，引起至少一个处理器执行本发明实施例第三方面所述的方法。
第四方面，本发明实施例提供了一种用户终端，所述用户终端包括存储器及处理器，所述存储器耦接到所述处理器，所述存储器存储指令，当所述指令由所述处理器执行时以使所述处理器执行以下操作：当接收到第一触发指令时，控制目标对话框控件中的原生对 话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
与现有技术相比，本发明实施例提供的一种对话框控件显示方法、装置、可读存储介质及用户终端，通过当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，本方案使得原生对话框及第一背景以不同的动画效果进行显示，使得用户体验变好，并且目标对话框控件是基于原生对话框控件获得的，因此不会影响原生对话框的性能。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1是本发明实施例提供的一种用户终端的结构框图。
图2是本发明第一实施例提供的一种对话框控件显示方法的流程图。
图3是本发明第一实施例提供的一种对话框控件显示方法的示意图。
图4是本发明第一实施例提供的一种对话框控件显示方法的第一部分流程图。
图5是本发明第一实施例提供的一种对话框控件显示方法的第二部分流程图。
图6是本发明第二实施例提供的一种对话框控件显示装置的结构框图。
具体实施方式
下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
图1示出了一种可应用于本发明实施例中的用户终端100的结构框图。如图1所示，用户终端100包括存储器102、存储控制器104，一个或多个(图中仅示出一个)处理器106、外设接口108、射频模块110、音频模块112、触控屏幕114等。这些组件通过一条或多条通讯总线/信号线116相互通讯。
存储器102可用于存储软件程序以及模块，如本发明实施例中的对话框控件显示方法以及装置对应的程序指令/模块，处理器106通过运行存储在存储器102内的软件程序以及模块，从而执行各种功能应用以及数据处理，如本发明实施例提供的对话框控件显示方法。
存储器102可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。
外设接口108将各种输入/输入装置耦合至处理器106以及存储器102。在一些实施例中，外设接口108，处理器106以及存储控制器104可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。
射频模块110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。
音频模块112向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。
触控屏幕114在用户终端100与用户之间同时提供一个输出及输入界面。可选地，触控屏幕114向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频及其任意组合。
可以理解，图1所示的结构仅为示意，用户终端100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。
本发明实施例提供的对话框控件显示方法可以运行于图1所示的用户终端100中。该方法包括：当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件基于原生对话框控件获得。本方案使得原生对话框及第一背景以不同的动画效果进行显示，使得用户体验变好，并且目标对话框控件是基于原生对话框控件获得的，因此不会影响原生对话框的性能。下面对该对话框控件显示方法进行详细说明。
图2示出了本发明第一实施例提供的一种对话框控件显示方法的流程图，请参阅图2，该对话框控件显示方法运行于上述用户终端中，该方法包括：
步骤S210，接收第一触发指令。
用户可以通过指定手势触摸用户终端界面的指定区域，向用户终端发出第一触发指令。
其中，指定手势可以包括点击手势、按压手势或两者的结合。
可选的，所述点击手势的实施方式有多种，例如，单点点击，多点点击，按照预设的节奏点击，按照预设的频率点击，可选的，单点与预设的节奏的结合式的点击，多点与预设的节奏的结合式的点击，单点与预设的频率的结合式的点击，多点与预设的频率的结合式的点击也属于本发明实施例保护的范围。
所述按压手势的实施方式也有多种，例如，按照预定的力度进行按压，单次按压，多次按压等。
例如，请参阅图3，用户终端界面包括一拍照按钮，若用户点击该用户终端界面的拍照按钮时，用户终端在拍照按钮所在的触控屏幕的位置接收到第一触发指令。
步骤S220，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
其中，第一动画效果及第二动画效果的实施方式很多，作为一种实施方式，所述第一动画效果包括：控制所述原生对话框在预设时间内从用户终端界面底部沿顶部方向逐渐显示。当然，所述第一动画效果也可以包括：控制所述原生对话框在预设时间内从用户终端界面顶部沿底部方向逐渐显示；或者，在其他实施例中，第一动画效果也可以包括：控制所述原生对话框在预定时间内从用户终端的左侧沿右侧方向逐渐显示，又或者，控制所述原生对话框在预定时间内从用户终端的右侧沿左侧方向逐渐显示。
作为一种实施方式，控制所述第二动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由大变小。也就是说，控制该第一背景由不可见逐渐变为可见或者可见度低逐渐变为可见度高。
请参阅图3，目标对话框控件中的原生对话框为图3中圆圈框起来的部分2，目标对话框控件中的第一背景为图3中的暗色背景部分1。当接收到第一触发指令时，控制该目标对话框控件中的原生对话框在200ms内从用户终端界面底部沿顶部方向逐渐显示，并同时控制目标对话框控件中的第一背景在200ms内由不可见变为可见直至如图3中所示状态。
作为一种实施方式，在接收到第一触发指令时之前，所述方法还包括：基于原生对话框控件获得目标对话框控件。
进一步的，请参阅图4，基于原生对话框控件获得目标对话框控件的步骤包括：
步骤S310，将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭；将所述原生背景设置为透明。
React Native官方网站提供的原生对话框控件为Modal，作为步骤S310的一种可选的实施方式，可以新建一个AnimModal.js，将AnimModal.js作为目标对话框控件，在render()方法中返回该目标对话框控件的布局。
render()方法具体实现如下：
<Modal transparent＝{true}animationType＝{'none'}visible＝{this.state.modalVisible}></Modal>
下面对该实现方式进行详细说明：
标签Modal为React Native官方网站提供的原生对话框控件。在render()方法中设置transparent＝{true}，即实现了将原生背景设置为透明。在render()方法中设置animationType＝{'none'}，即实现了将原生对话框及原生背景对应的原生动画效果设置为关闭。
上述实现方式，通过引用原生对话框控件Modal实现目标对话框控件，继承了所有原生对话框控件Modal的属性，是真正意义上的对话框，不会因为通过View模拟的对话框而影响上层界面View的问题。
步骤S320，为原生对话框设置第一动画效果。
为原生对话框设置第一动画效果可分为两个步骤：(1)为原生对话框添加实现第一动画效果的控件Animated.View；(2)通过设置控制实现第一动画效果的控件的属性，来控制原生对话框第一动画效果的展示。
作为一种实施方式，下面首先对步骤(1)为原生对话框添加实现第一动画效果的控件Animated.View进行详细说明。
采用Animated.View进行封装，在上述目标对话框控件Modal的内部为原生对话框添加实现第一动画效果的控件Animated.View，并设置该控件Animated.View的样式属性style，具体实现如下：
Figure PCTCN2017112162-appb-000001
下面对该实现方式进行详细说明：
(1)将该控件Animated.View的位置position设置为相对位置absolute，其宽度width设置为屏幕宽，bottom:0表示从用户终端界面底部开始。
(2)transform:[{translateY:this.translateY}]}]}表示第一动画效果为translateY，在垂直方向的位置为translateY，由变量translateY控制其位置变化。
(3){this.props.children}表示引用外部的目标对话框控件的布局代码，这样设置就可以将此目标对话框控件Modal.js封装起来，不用考虑目标对话框控件实际的布局样式，通过this.props.children来引用即可。
通过原生对话框单独加入第一动画效果方式，达到与原生对话框中原生动画效果一致的效果。通过this.props.children方式，封装了原生对话框的布局样式代码实现了高度适配性，只需要在引用控件时候在此标签<AnimModal>内部书写具体需要实现的对话框布局代码即可。
由于当接收到第一触发指令时，需要控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，因此，步骤(2)通过设置控制实现第一动画效果的控件的属性，来控制原生对话框第一动画效果的展示的实施方式，可以与通过设置控制实现第二动画效果的控件的属性，来控制第一背景以第二动画效果的展示的实施方式放到一起来布局，来满足同时控制的效果。具体实现代码在后续进行详细说明。
步骤S330，在所述原生对话框控件中加入所述第一背景，并为所述第一背景设置对应的第二动画效果。
步骤S330的实施分为两个步骤：(1)在原生对话框控件中加入第一背景，并为第一背景添加实现第二动画效果的控件Animated.View；(2)通过设置控制实现第二动画效果的控件的属性，来控制第一背景以第二动画效果的展示。
作为一种实施方式，下面首先对步骤(1)在原生对话框控件中加入第一背景，并为第一背景添加实现第二动画效果的控件Animated.View进行详细说明。
采用控件Animated.View进行封装，在上述目标对话框控件Modal的内部为第一背景添加实现第二动画效果的控件Animated.View，并设置该控件Animated.View的样式属性style。
style＝{{width:width,height:height,backgroundColor:'rgba(0,0,0,0.7)',opacity:this.opacity}}
将该控件Animated.View的宽度width设置为屏幕宽，将高度height设置为屏幕高，将第一背景的背景色设置为rgba(0,0,0,0.7),将第一背景的透明度opacity设置为变量opacity，通过改变变量opacity的值来改变第一背景的透明度。其中，rgba(0,0,0,0.7)对应暗色背景。
当原生对话框已经添加了实现第一动画效果的控件Animated.View，并且第一背景也已经添加了实现第二动画效果的控件Animated.View，此时可以通过设置同时控制上述两个控件Animated.View的方式，来实现控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示的效果。
具体实现方式如下：
在render()方法中设置visible＝{this.state.modalVisible}用来控制Modal的显示。
当modalVisible为true时,控制Modal显示，即控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示。
进一步的，写_open()方法用于控制Modal显示。
open()方法的实现代码具体如下:
Figure PCTCN2017112162-appb-000002
下面具体对上述实现方式进行说明：
modalVisible:true，表示modalVisible设置为true时，目标对话框控件显示。
Animated.timing(this.translateY,{toValue:0,duration:200}),设置translateY属性由默认的对话框高度的值变为0，耗时200ms。
Animated.timing(this.opacity,{toValue:1,duration:200}),设置opacity透明度属性由0变为1，耗时200ms。
Animated.timing是让当前动画按照线性方式执行，Animated.parallel是让内部的两个线性动画同时执行。
上述代码产生的效果，让第一背景层透明度在200ms内逐渐由不可见变为可见，同时让原生对话框由屏幕底部的外面在200ms内逐渐位移到屏幕底部。
进一步的，基于原生对话框控件获得目标对话框控件的步骤还包括：为所述原生对话框设置第三动画效果，为所述第一背景设置第四动画效果。
作为一种实施方式，所述第三动画效果包括：控制所述原生对话框在预设时间内从用户终端界面沿底部方向逐渐隐藏，第三动画效果还可以通过其他方式实现，例如，在其他实施方式中，第三动画效果还可以包括：控制所述原生对话框在预设时间内从用户终端界 面沿顶部方向逐渐隐藏，或控制所述原生对话框在预设时间内从用户终端界面沿左侧方向逐渐隐藏，或控制所述原生对话框在预设时间内从用户终端界面沿右侧方向逐渐隐藏。作为一种实施方式，所述第四动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由小变大。
其中，原生对话框的第三动画效果及第一背景的第四动画效果是在用户终端接收到第二触发指令时展示。
作为一种实施方式，为该第一背景构建用户操作响应层，可以为该第一背景添加响应手指点击的控件TouchableOpacity，并设置该控件TouchableOpacity的样式style。
style＝{{position:'absolute',width:width,height:height}}将该控件TouchableOpacity的位置position设置为相对位置'absolute'，将宽度width设置为屏幕宽，将高度height设置为屏幕高。
进一步的，设置该控件TouchableOpacity被点击后促发的方法：
onPress＝{this._close}
即当第一背景中的TouchableOpacity控件被点击后促发_close方法。
进一步的，该_close方法的实现代码具体如下:
Figure PCTCN2017112162-appb-000003
下面具体对上述实现方式进行说明：
代码逻辑原理与_open相反，控制第一背景的透明度在200ms内逐渐由可见变为不可见，并同时控制原生对话框由屏幕底部在200ms内逐渐位移到屏幕底部的外面，距离为dialogheight。
并且，设置当modalVisible为false时，调用_close方法控制Modal隐藏，即控制所述目标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制所述目标对话框控件中 的第一背景以第四动画效果隐藏。
作为一种实施方式，请参阅图5，所述方法还包括：
步骤S410，接收第二触发指令。
用户可以通过指定手势触摸第一背景的指定区域，向用户终端发出第二触发指令。指定手势的实施方式与步骤S210中指定手势的实施方式类似，此处不再赘述。
步骤S420，控制所述目标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。
当接收第二触发指令，触发响应手指点击的控件TouchableOpacity，以使该控件TouchableOpacity被点击后促发调用_close方法，从而实现控制目标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制目标对话框控件中的第一背景以第四动画效果隐藏。
本发明实施例提供的对话框控件显示方法，通过当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，本方案使得原生对话框及第一背景以不同的动画效果进行显示，使得用户体验变好，并且目标对话框控件是基于原生对话框控件获得的，因此不会影响原生对话框的性能。通过将第一背景单独加入第二动画效果，避免了原生对话框控件Modal的原生动画直接影响到第一背景，造成体验差的后果。同时第一背景加入了触控响应代码，改进了原生对话框控件Modal中的原生背景的体验效果。通过设置动画同步执行，让第一背景的透明度和对话框位移动画同步执行，达到此控件动画效果的流畅性，增强了用户体验。
请参阅图6，是本发明第二实施例提供的对话框控件显示装置500的功能模块示意图。所述对话框控件显示装置500包括显示模块510。
显示模块510用于当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
作为一种实施方式，所述对话框控件显示装置500还可以包括配置模块520，用于将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭；将所述原生背景设置为透明；为所述原生对话框设置所述第一动画效果；在所述原生对话框控件中加入所述第一背景，并为所述第一背景设置对应的第二动画效果。
进一步的，所述配置模块520还用于为所述原生对话框设置第三动画效果，为所述第一背景设置第四动画效果。
作为一种实施方式，所述显示模块510，还用于当接收到第二触发指令时，控制所述目 标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。
作为一种实施方式，所述第一动画效果包括：控制所述原生对话框在预设时间内从用户终端界面底部沿顶部方向逐渐显示，在其他实施例中，第一动画效果也可以包括：控制所述原生对话框在预定时间内从用户终端的左侧沿右侧方向逐渐显示，又或者，控制所述原生对话框在预定时间内从用户终端的右侧沿左侧方向逐渐显示。
作为一种实施方式，所述第二动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由大变小。
作为一种实施方式，所述第三动画效果包括：控制所述原生对话框在预设时间内从用户终端界面沿底部方向逐渐隐藏，第三动画效果还可以通过其他方式实现，例如，在其他实施方式中，第三动画效果还可以包括：控制所述原生对话框在预设时间内从用户终端界面沿顶部方向逐渐隐藏，或控制所述原生对话框在预设时间内从用户终端界面沿左侧方向逐渐隐藏，或控制所述原生对话框在预设时间内从用户终端界面沿右侧方向逐渐隐藏。
作为一种实施方式，所述第四动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由小变大。
以上各模块可以是由软件代码实现，此时，上述的各模块可存储于用户终端100的存储器102内。以上各模块同样可以由硬件例如集成电路芯片实现。
本发明第三实施例提供了一种用户终端，所述用户终端包括存储器及处理器，所述存储器耦接到所述处理器，所述存储器存储指令，当所述指令由所述处理器执行时以使所述处理器执行以下操作：
当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
本发明第四实施例提供了一种可读存储介质，所述可读存储介质包括一组指令，当执行所述指令时，引起至少一个处理器执行本发明第一实施例提供的对话框控件显示方法。
需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
本发明实施例所提供的对话框控件显示装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，诸如第一和第三等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟 悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
工业实用性
本申请解决现有原生对话框和原生背景动画效果单一的问题，极大地提高了原生对话框和原生背景对观众的吸引力和用户体验，具有极大地实用价值。

Claims (18)

  1. 一种对话框控件显示方法，其特征在于，所述方法包括：
    当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件基于原生对话框控件获得，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
  2. 根据权利要求1所述的方法，其特征在于，所述当接收到第一触发指令时之前，还包括：
    将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭；
    将所述原生背景设置为透明；
    为所述原生对话框设置所述第一动画效果；
    在所述原生对话框控件中加入所述第一背景，并为所述第一背景设置对应的第二动画效果。
  3. 根据权利要求2所述的方法，其特征在于，为所述第一背景设置对应的第二动画效果之后，所述方法还包括：
    为所述原生对话框设置第三动画效果，为所述第一背景设置第四动画效果。
  4. 根据权利要求3所述的方法，其特征在于，所述方法还包括：
    当接收到第二触发指令时，控制所述目标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。
  5. 根据权利要求1至4中任一项所述的方法，其特征在于，所述第一动画效果包括：控制所述原生对话框在预设时间内从用户终端界面底部沿顶部方向逐渐显示。
  6. 根据权利要求1至4中任一项所述的方法，其特征在于，所述第二动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由大变小。
  7. 根据权利要求3或4所述的方法，其特征在于，所述第三动画效果包括：控制所述原生对话框在预设时间内从用户终端界面沿底部方向逐渐隐藏。
  8. 根据权利要求3或4所述的方法，其特征在于，所述第四动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由小变大。
  9. 一种对话框控件显示装置，其特征在于，所述装置包括：
    显示模块，用于当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果 显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
  10. 根据权利要求9所述的对话框控件显示装置，其特征在于，所述装置还包括：
    配置模块，配置成将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭；
    将所述原生背景设置为透明；
    为所述原生对话框设置所述第一动画效果；
    在所述原生对话框控件中加入所述第一背景，并为所述第一背景设置对应的第二动画效果。
  11. 根据权利要求10所述的对话框控件显示装置，其特征在于，所述配置模块还配置成为所述原生对话框设置第三动画效果，为所述第一背景设置第四动画效果。
  12. 根据权利要求11所述的对话框控件显示装置，其特征在于，所述显示模块还配置成当接收到第二触发指令时，控制所述目标对话框控件中的原生对话框以第三动画效果隐藏，并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。
  13. 根据权利要求9-12任一项所述的对话框控件显示装置，其特征在于，所述第一动画效果包括：控制所述原生对话框在预设时间内从用户终端界面底部沿顶部方向逐渐显示。
  14. 根据权利要求9-12任一项所述的对话框控件显示装置，其特征在于，所述第二动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由大变小。
  15. 根据权利要求11或12所述的对话框控件显示装置，其特征在于，所述第三动画效果包括：控制所述原生对话框在预设时间内从用户终端界面沿底部方向逐渐隐藏。
  16. 根据权利要求11或12所述的对话框控件显示装置，其特征在于，所述第四动画效果包括：控制所述第一背景的透明度在预设时间内逐渐由小变大。
  17. 一种可读存储介质，其特征在于，所述可读存储介质包括一组指令，当执行所述指令时，引起至少一个处理器执行权利要求1-8任一项所述的方法。
  18. 一种用户终端，其特征在于，所述用户终端包括处理器以及存储器，所述存储器耦接到所述处理器，所述存储器存储指令，当所述指令由所述处理器执行时使所述用户终端执行以下操作：
    当接收到第一触发指令时，控制目标对话框控件中的原生对话框以第一动画效果显示，并同时控制所述目标对话框控件中的第一背景以第二动画效果显示，其中，所述目标对话框控件是基于原生对话框控件获得的，所述原生对话框控件包括原生对话框及原生背景，所述原生对话框及所述原生背景均对应原生动画效果。
PCT/CN2017/112162 2017-05-12 2017-11-21 对话框控件显示方法、装置、可读存储介质及用户终端 WO2018205548A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710346723.0A CN107168606B (zh) 2017-05-12 2017-05-12 对话框控件显示方法、装置及用户终端
CN201710346723.0 2017-05-12

Publications (1)

Publication Number Publication Date
WO2018205548A1 true WO2018205548A1 (zh) 2018-11-15

Family

ID=59815310

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/112162 WO2018205548A1 (zh) 2017-05-12 2017-11-21 对话框控件显示方法、装置、可读存储介质及用户终端

Country Status (2)

Country Link
CN (1) CN107168606B (zh)
WO (1) WO2018205548A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107168606B (zh) * 2017-05-12 2019-05-17 武汉斗鱼网络科技有限公司 对话框控件显示方法、装置及用户终端
CN108234903B (zh) 2018-01-30 2020-05-19 广州市百果园信息技术有限公司 互动特效视频的处理方法、介质和终端设备
CN115291759A (zh) * 2022-07-28 2022-11-04 北京字跳网络技术有限公司 信息处理方法、装置及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
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
CN1257247A (zh) * 1998-12-16 2000-06-21 国际商业机器公司 用于保护计算机系统的图形用户界面中控件的方法和装置
CN101706704A (zh) * 2009-11-06 2010-05-12 谢达 一种会自动改变不透明度的用户界面显示方法
CN104298510A (zh) * 2014-09-30 2015-01-21 珠海市君天电子科技有限公司 一种实现控件按钮锁定的动画方法及装置
CN107168606A (zh) * 2017-05-12 2017-09-15 武汉斗鱼网络科技有限公司 对话框控件显示方法、装置及用户终端

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10643023B2 (en) * 2015-09-25 2020-05-05 Oath, Inc. Programmatic native rendering of structured content
CN106250153A (zh) * 2016-08-01 2016-12-21 乐视控股（北京）有限公司 一种用户界面控制方法及设备
CN106547571B (zh) * 2016-11-30 2020-05-05 北京酷我科技有限公司 一种可自定义的动图显示方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
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
CN1257247A (zh) * 1998-12-16 2000-06-21 国际商业机器公司 用于保护计算机系统的图形用户界面中控件的方法和装置
CN101706704A (zh) * 2009-11-06 2010-05-12 谢达 一种会自动改变不透明度的用户界面显示方法
CN104298510A (zh) * 2014-09-30 2015-01-21 珠海市君天电子科技有限公司 一种实现控件按钮锁定的动画方法及装置
CN107168606A (zh) * 2017-05-12 2017-09-15 武汉斗鱼网络科技有限公司 对话框控件显示方法、装置及用户终端

Also Published As

Publication number Publication date
CN107168606A (zh) 2017-09-15
CN107168606B (zh) 2019-05-17

Similar Documents

Publication Publication Date Title
US11012740B2 (en) Method, device, and storage medium for displaying a dynamic special effect
US10056113B2 (en) Video processing method and associated electronic device
US10565924B2 (en) Method for determining scene currently displayed on terminal and terminal
US20180011818A1 (en) Webpage Update Method And Apparatus
US10747387B2 (en) Method, apparatus and user terminal for displaying and controlling input box
WO2018205548A1 (zh) 对话框控件显示方法、装置、可读存储介质及用户终端
US20150063785A1 (en) Method of overlappingly displaying visual object on video, storage medium, and electronic device
US10817071B2 (en) Selectively reducing reflectivity of a display
CN107077347B (zh) 视图管理架构
WO2018176841A1 (zh) 屏幕尺寸自适应方法、装置、用户终端及可读存储介质
CN110377220B (zh) 一种指令响应方法、装置、存储介质及电子设备
EP3015970A1 (en) Method for simulating digital watercolor image and electronic device using the same
EP2911115B1 (en) Electronic device and method for color extraction
KR20150021722A (ko) 스크롤 실행의 화면 표시 방법, 장치 및 기록매체
US20140325404A1 (en) Generating Screen Data
WO2018223593A1 (zh) 分段选择视图呈现方法、装置及用户终端
WO2018113748A1 (zh) 一种视频全屏的实现方法及电子设备
WO2017097142A1 (zh) 界面操作的处理方法、装置和智能终端
CN110785741A (zh) 生成用户界面容器
US11726644B2 (en) Providing visual feedback during touch-based operations on user interface elements
CN110603516A (zh) 计算机图形用户界面的个性化可感知性设置
CN110730944B (zh) 经放大的输入面板
US20140237403A1 (en) User terminal and method of displaying image thereof
KR20140103017A (ko) 사용자 단말 및 이의 이미지 표시 방법

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17908920

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17908920

Country of ref document: EP

Kind code of ref document: A1