一种动态显示颜色的实现方法和装置制造方法及图纸

技术编号:14784132 阅读:76 留言:0更新日期:2017-03-10 16:28
本发明专利技术实施例公开了一种动态显示颜色的实现方法和装置,用于在以HTML/CSS搭建用户界面的应用或网页中,避免界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响,提升用户体验。本发明专利技术实施例方法包括:在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面,为该图形界面添加模糊半径不小于1像素的模糊滤镜,该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果。

【技术实现步骤摘要】

本专利技术涉及图像处理领域,尤其涉及一种动态显示颜色的实现方法和装置
技术介绍
随着计算机界面显示技术的发展,各种不同种类的背景画面被应用到各种显示界面中。由于动态背景相对于静态背景具有更为突出的视觉呈现能力和更加丰富的展示内容,使得动态背景被广泛的应用。然而,在实际应用中,采用动态背景往往会因为动态背景的画面中各种图形的运动或颜色的变化而分散用户对主界面的注意力,反而形成了干扰。
技术实现思路
本专利技术实施例提供了一种动态显示颜色的实现方法和装置,用于以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中,避免界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响,提升用户的使用体验。一种动态显示颜色的实现方法,包括:在以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中,生成动态的图形界面;为所述图形界面添加模糊滤镜,所述模糊滤镜的模糊半径不小于1像素。一种装置,包括:生成模块,用于在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面;渲染模块,用于为所述生成模块生成的图形界面添加模糊滤镜,所述模糊滤镜的模糊半径不小于1像素。从以上技术方案可以看出,本专利技术实施例具有以下优点:在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面,为该图形界面添加模糊半径不小于1像素的模糊滤镜,该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果,从而使透过该磨砂玻璃层看到的图形界面中所有运动的图形或变换的颜色的轮廓变得模糊,从视觉上产生一种相互交融的颜色在缓慢流动的效果,整个流动过程十分自然,而这种颜色缓慢流动的效果不会分散用户对主界面的注意力,既保持了动态背景图形界面的绚丽效果,又避免了界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响,提升了用户的使用体验。附图说明图1为本专利技术实施例中动态显示颜色的实现方法的一个流程示意图;图2为本专利技术实施例中图形界面与主界面一个示意图;图3为本专利技术实施例中动态显示颜色的实现方法的另一个流程示意图;图4为本专利技术实施例中动态显示颜色的实现方法的另一个流程示意图;图5为本专利技术实施例中生成的图形一个实例示意图;图6为本专利技术实施例中装置的一个结构示意图;图7为本专利技术实施例中装置的另一个结构示意图;图8为本专利技术实施例中装置的另一个结构示意图。具体实施方式下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术的一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。请参阅图1,本专利技术实施例中动态显示颜色的实现方法一个实施例包括:101、在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面;运行着以HTML/CSS搭建用户界面的应用或网页的装置在该应用或网页中生成动态的图形界面。该动态的图形界面上存在图形的运动或颜色的变换,且该动态的图形界面在该应用或网页的主界面之下,作为该主界面的背景界面,该主界面为该应用或网页的主要界面,包括用于接收用户输入信息的界面或显示信息给用户的界面。102、为所述图形界面添加模糊滤镜。该装置生成动态的图形界面后,为该图形界面添加模糊滤镜,该模糊滤镜的模糊半径不小于1像素。可以理解的是,图形界面上添加模糊滤镜,会产生磨砂玻璃效果,透过该磨砂玻璃效果观察该图形界面上的图形,会发现该图形界面上图形的界限不再分明,而使得各个图形的颜色相互交融,模糊半径越大,该图形与颜色相互交融的效果越强,当模糊半径足够大时,甚至不再能观察到图形的确切形状,而只能观察到区域性的颜色的缓慢变换与流动。本专利技术实施例在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面,为该图形界面添加模糊半径不小于1像素的模糊滤镜,该模糊滤镜会在该图形界面上形成一层半透明的磨砂玻璃层的效果,从而使透过该磨砂玻璃层看到的图形界面中所有运动的图形或变换的颜色的轮廓变得模糊,从视觉上产生一种相互交融的颜色在缓慢流动的效果,整个流动过程十分自然,而这种颜色缓慢流动的效果不会分散用户对主界面的注意力,既保持了动态背景图形界面的绚丽效果,又避免了界面背景中各种图形的运动或颜色的变化在视觉上对主界面的影响,提升了用户的使用体验。其中本实施例中图形界面与主界面的关系可以如图2所示,图2所示为一个以HTML/CSS搭建用户界面的应用,其中201所示部分为主界面,供用户输入信息,202所示部分位于主界面201之下,作为该主界面201的背景界面,显示有动态的颜色变换。上面实施例中,为图形界面添加模糊半径不小于1像素的模糊滤镜。在实际应用中,可以根据多个因素来确定一个最优的模糊半径再进行模糊滤镜的添加,请参阅图3,本专利技术实施例中动态显示颜色的实现方法另一个实施例包括:301、在以HTML/CSS搭建用户界面的应用或网页中,生成动态的图形界面;运行着以HTML/CSS搭建用户界面的应用或网页的装置在该应用或网页中生成动态的图形界面。该动态的图形界面上存在图形的运动或颜色的变换,且该动态的图形界面在该应用或网页的主界面之下,作为该主界面的背景界面,该主界面为该应用或网页的主要界面,包括用于接收用户输入信息的界面或显示信息给用户的界面。该装置可以为任意能够运行该以HTML/CSS搭建用户界面的应用或网页的设备,例如计算机,服务器,智能终端等。302、根据所述图形界面中图形的复杂度以及渲染所述图形界面的设备的性能,确定所述模糊滤镜的模糊半径为第一模糊半径;装置生成动态的图形界面后,根据该图形界面中图形的复杂度以及渲染该图形界面的设备的性能,确定该模糊滤镜的模糊半径为第一模糊半径。渲染该图形界面的设备可以为该生成动态图形界面的装置,也可以为单独对图形界面进行渲染的部件,此处不作限定。可以理解的是,该模糊半径的取值范围为1到正无穷,图形界面中图形的复杂度越高,要产生较好的交融效果,则该模糊半径就需要越大,因为模糊半径越大,图形的边缘显示越不明显,给人的感觉为该磨砂玻璃越“厚”;而模糊半径越大,对渲染该图形界面的设备的性能要求越高,所以,综合考虑图形的复杂度以及渲本文档来自技高网...

【技术保护点】
一种动态显示颜色的实现方法,其特征在于,包括:在以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页中,生成动态的图形界面;为所述图形界面添加模糊滤镜,所述模糊滤镜的模糊半径不小于1像素。

【技术特征摘要】
1.一种动态显示颜色的实现方法,其特征在于,包括:
在以超文本标记语言HTML/级联样式表CSS搭建用户界面的应用或网页
中,生成动态的图形界面;
为所述图形界面添加模糊滤镜,所述模糊滤镜的模糊半径不小于1像素。
2.根据权利要求1所述的方法,其特征在于,所述为所述图形界面添加
模糊滤镜具体包括:
根据所述图形界面中图形的复杂度以及渲染所述图形界面的设备的性
能,确定所述模糊滤镜的模糊半径为第一模糊半径;
按照所述第一模糊半径为所述图形界面添加模糊滤镜。
3.根据权利要求2所述的方法,其特征在于,所述方法还包括:
设置调整所述模糊半径的接口。
4.根据权利要求1至3中任一项所述的方法,其特征在于,所述生成动
态的图形界面具体包括:
生成用于展示图形的层;
在所述层上生成用于展示颜色的图形;
为所述图形添加位移动画并设置动画属性,所述层与所述图形组合为所
述动态的图形界面。
5.根据权利要求4所述的方法,其特征在于,所述图形的数量为多个,
所述层为HTML文件中一个独立的层次DIV元素;
在所述层上生成用于展示颜色的图形具体包括:
采用DIV和CSS在所述层上生成图形,或采用SVG在所述层上生成图
形,或采用HTML 5Canvas在所述层上生成图形;
为所述图形设置随时间改变的颜色、大小或透明度。
6.一种装置,其特征在于,包括:
生成模块,用于在以HTML/CSS搭建用户界面的应用或网页中,生成动
态的图形...

【专利技术属性】
技术研发人员:蒋钊
申请(专利权)人:广东威创视讯科技股份有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1