对话框控件显示方法、装置及用户终端与流程

文档序号:11250524阅读:333来源:国知局
对话框控件显示方法、装置及用户终端与流程

本发明涉及计算机应用领域,具体而言,涉及一种对话框控件显示方法、装置及用户终端。



背景技术:

由reactnative官方网站提供的原生对话框控件中包括了原生对话框及原生背景,该原生背景为暗色背景,并且该原生对话框及该原生背景均对应同一个原生动画效果。因此,当用户终端接收到用户的触发指令时,会控制该原生对话框及该原生背景均按照同一个原生动画效果一起从用户终端的底部滑入用户终端界面,使得用户体验不佳。



技术实现要素:

有鉴于此,本发明实施例的目的在于提供一种对话框控件显示方法、装置及用户终端,以解决上述问题。

为了实现上述目的,本发明实施例采用的技术方案如下:

第一方面,本发明实施例提供了一种对话框控件显示方法,所述方法包括:当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,所述原生对话框控件包括原生对话框及原生背景,所述原生对话框及所述原生背景均对应原生动画效果。

第二方面,本发明实施例提供了一种对话框控件显示装置,所述装置包括:显示模块,用于当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,所述原生对话框控件包括原生对话框及原生背景,所述原生对话框及所述原生背景均对应原生动画效果。

第三方面,本发明实施例提供了一种用户终端,所述用户终端包括存储器及处理器,所述存储器耦接到所述处理器,所述存储器存储指令,当所述指令由所述处理器执行时以使所述处理器执行以下操作:当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,所述原生对话框控件包括原生对话框及原生背景,所述原生对话框及所述原生背景均对应原生动画效果。

与现有技术相比,本发明实施例提供的一种对话框控件显示方法、装置及用户终端,通过当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,本方案使得原生对话框及第一背景以不同的动画效果进行显示,使得用户体验变好,并且目标对话框控件是基于原生对话框控件获得的,因此不会影响原生对话框的性能。

为使本发明的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本发明的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。

图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,将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭;将所述原生背景设置为透明。

reactnative官方网站提供的原生对话框控件为modal,作为步骤s310的一种具体的实施方式,可以新建一个animmodal.js,将animmodal.js作为目标对话框控件,在render()方法中返回该目标对话框控件的布局。

render()方法具体实现如下:

<modaltransparent={true}animationtype={'none'}

visible={this.state.modalvisible}></modal>

下面对该实现方式进行详细说明:

标签modal为reactnative官方网站提供的原生对话框控件。在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,具体实现如下:

下面对该实现方式进行详细说明:

(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()方法的实现代码具体如下:

下面具体对上述实现方式进行说明:

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方法的实现代码具体如下:

下面具体对上述实现方式进行说明:

代码逻辑原理与_open刚好相反,控制第一背景的透明度在200ms内逐渐由可见变为不可见,并同时控制原生对话框由屏幕底部在200ms内逐渐位移到屏幕底部的外面,距离为dialogheight。

并且,设置当modalvisible为false时,调用_close方法控制modal隐藏,即控制所述目标对话框控件中的原生对话框以第三动画效果隐藏,并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。

作为一种实施方式,请参阅图5,所述方法还包括:

步骤s410,接收第二触发指令。

用户可以通过指定手势触摸第一背景的指定区域,向用户终端发出第二触发指令。指定手势的实施方式与步骤s210中指定手势的实施方式类似,此处不再赘述。

步骤s420,控制所述目标对话框控件中的原生对话框以第三动画效果隐藏,并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。

当接收第二触发指令,触发响应手指点击的控件touchableopacity,以使该控件touchableopacity被点击后促发调用_close方法,从而实现控制目标对话框控件中的原生对话框以第三动画效果隐藏,并同时控制目标对话框控件中的第一背景以第四动画效果隐藏。

本发明实施例提供的对话框控件显示方法,通过当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,本方案使得原生对话框及第一背景以不同的动画效果进行显示,使得用户体验变好,并且目标对话框控件是基于原生对话框控件获得的,因此不会影响原生对话框的性能。通过将第一背景单独加入第二动画效果,避免了原生对话框控件modal的原生动画直接影响到第一背景,造成体验差的后果。同时第一背景加入了触控响应代码,改进了原生对话框控件modal中的原生背景的体验效果。通过设置动画同步执行,让第一背景的透明度和对话框位移动画同步执行,达到此控件动画效果的流畅性,增强了用户体验。

请参阅图6,是本发明第二实施例提供的对话框控件显示装置500的功能模块示意图。所述对话框控件显示装置500包括显示模块510。

显示模块510,用于当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,所述原生对话框控件包括原生对话框及原生背景,所述原生对话框及所述原生背景均对应原生动画效果。

作为一种实施方式,所述装置还可以包括配置装置520,用于将所述原生对话框控件中所述原生对话框及所述原生背景对应的原生动画效果设置为关闭;将所述原生背景设置为透明;为所述原生对话框设置所述第一动画效果;在所述原生对话框控件中加入所述第一背景,并为所述第一背景设置对应的第二动画效果。

进一步的,所述配置装置520,还用于为所述原生对话框设置第三动画效果,为所述第一背景设置第四动画效果。

作为一种实施方式,所述显示模块510,还用于当接收到第二触发指令时,控制所述目标对话框控件中的原生对话框以第三动画效果隐藏,并同时控制所述目标对话框控件中的第一背景以第四动画效果隐藏。

作为一种实施方式,所述第一动画效果包括:控制所述原生对话框在预设时间内从用户终端界面底部沿顶部方向逐渐显示。

作为一种实施方式,所述第二动画效果包括:控制所述第一背景的透明度在预设时间内逐渐由大变小。

作为一种实施方式,所述第三动画效果包括:控制所述原生对话框在预设时间内从用户终端界面沿底部方向逐渐隐藏。

作为一种实施方式,所述第四动画效果包括:控制所述第一背景的透明度在预设时间内逐渐由小变大。

以上各模块可以是由软件代码实现,此时,上述的各模块可存储于用户终端100的存储器102内。以上各模块同样可以由硬件例如集成电路芯片实现。

本发明第三实施例提供了一种用户终端,所述用户终端包括存储器及处理器,所述存储器耦接到所述处理器,所述存储器存储指令,当所述指令由所述处理器执行时以使所述处理器执行以下操作:

当接收到第一触发指令时,控制目标对话框控件中的原生对话框以第一动画效果显示,并同时控制所述目标对话框控件中的第一背景以第二动画效果显示,其中,所述目标对话框控件是基于原生对话框控件获得的,所述原生对话框控件包括原生对话框及原生背景,所述原生对话框及所述原生背景均对应原生动画效果。

需要说明的是,本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。

本发明实施例所提供的对话框控件显示装置,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,装置实施例部分未提及之处,可参考前述方法实施例中相应内容。

在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现方式中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。

另外,在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:u盘、移动硬盘、只读存储器(rom,read-onlymemory)、随机存取存储器(ram,randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是,在本文中,诸如第一和第三等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。

以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1