一种页面动画展示方法及系统技术方案

本发明专利技术公开了一种页面动画展示方法及系统，所述方法包括：根据网页绘图功能，绘制设定形状的图案；接收用户的手势互动操作；根据所述手势互动操作改变所述图案的形状。本发明专利技术实施例的方案，能够在页面上显示一个设定的卡通形象图案，根据用户的手势操作，该卡通图案会相应的变形和改变，从而带给用户互动的乐趣，丰富用户互动体验，从而极大的提高了用户体验度。

【技术实现步骤摘要】

本专利技术涉及互联网
，特别涉及一种页面动画展示方法及系统。
技术介绍
随着互联网技术的发展，越来越多的用户每天都需要在互联网上进行信息浏览、互动操作等，而网站网页的设计就变得非常重要，友好的交互界面显然可以带给用户良好的体验。网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。由于企业需要通过网站呈现产品、服务、理念、文化，或向受众提供某种功能服务。网页通常包括如下的元素信息：文本：文本是网页上最重要的信息载体和交流工具，网页中的主要信息一般都以文本形式为主。图像：图像元素在网页中具有提供信息并展示直观形象的作用。静态图像：在页面中可能是光栅图形或矢量图形。通常为GIF，JPEG或PNG；或矢量格式，如SVG或Flash。动画图像：通常动画为GIF和SVG。Flash动画：动画在网页中的作用是有效地吸引访问者更多的注意。声音：声音是多媒体和视频网页重要的组成部分。视频：视频文件的采用是网页效果更加精彩且富有动感。表格：表格是在网页中用来控制面业信息的布局方式。导航栏：导航栏在网页中是一组超链接，其连接的目的端是网页中重要的页面。交互式表单：表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据。利用服务器的数据库为客户端与服务器端提供更多的互动。网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。专业的网页设计，需要经历以下几个阶段：需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。以业务目标为中心进行功能策划，制作出栏目结构关系图。以满足用户体验设计为目标，使用axurerp或同类软件进行页面策划，制作出交互用例。以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。根据用户反馈，进行页面设计调整，以达到最优效果。网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。色彩是艺术表现的要素之一。在网页设计中，设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。如果企业有CIS(企业形象识别系统)，应按照其中的VI进行色彩运用。为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。网络上的三维空间是一个假想空间，这种空间关系需借助动静变化.图像的比例关系等空间因素表现出来。在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。现有技术中，通过对于网页设计以及提高互动性的方案越来越多，但是，各种设计方案良莠不齐，带给用户的体验也差别很大。更多的是，其中对于用户互动动画的设计都比较少，不能满足用户虚拟现实界面的需求。因而，亟需要一种新的网页互动动画设计的方案，以提高用户体验度。
技术实现思路
本专利技术提供一种页面动画展示方法及系统，用以解决现有技术中无法根据用户需要提供互动动画设计的问题。本专利技术提供一种页面动画展示方法，包括：根据网页绘图功能，绘制设定形状的图案；接收用户的手势互动操作；根据所述手势互动操作改变所述图案的形状。所述方法还包括：根据网页绘图功能，绘制一系列设定形状的图案；所述一系列设定形状的图案中包括各种设定形状图案的变形图案。所述方法还包括：所述变形图案模拟真实的图案操作而产生的变形绘制。所述方法还包括：改变所述图案的形状时，同时播放设定的音频、视频和/或文字内容信息。所述方法还包括：所述网页绘图功能为HTML5提供的canvas功能。所述方法还包括：所述改变所述图案的形状为动画展示。一种页面动画展示系统，包括：绘图单元，用于根据网页绘图功能，绘制设定形状的图案；互动接收单元，用于接收用户的手势互动操作并发送动画展示单元；动画展示单元，用于根据所述手势互动操作改变所述图案的形状。所述绘图单元还用于根据网页绘图功能，绘制一系列设定形状的图案；所述一系列设定形状的图案中包括各种设定形状图案的变形图案。所述系统还包括多媒体展示单元，用于在所述动画展示单元改变所述图案的形状时，同时播放设定的音频、视频和/或文字内容信息。所述绘图单元还用于利用HTML5提供的canvas功能绘制相应图案。本专利技术实施例中，通过根据网页绘图功能，绘制设定形状的图案；接收用户的手势互动操作；根据所述手势互动操作改变所述图案的形状。本专利技术实施例的方案，能够在页面上显示一个设定的卡通形象图案，根据用户的手势操作，该卡通图案会相应的变形和改变，从而带给用户互动的乐趣，丰富用户互动体验，从而极大的提高了用户体验度。本专利技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。下面通过附图和实施例，对本专利技术的技术方案做进一步的详细描述。附图说明附图用来提供对本专利技术的进一步理解，并且构成说明书的一部分，与本专利技术的实施例一起用于解释本专利技术，并不构成对本专利技术的限制。在附图中：图1为本专利技术实施例1提供的一种页面动画展示方法原理流程图；图2为本专利技术实施例2提供的一种页面动画展示系统结构示意图。具体实施方式以下结合附图对本专利技术的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本专利技术，并不用于限定本专利技术。如图1所示，为本专利技术实施例1提供的一种页面动画展示方法原理流程图，其中，步骤11，根据网页绘图功能，绘制设定形状的图案。网页绘图功能，通常是网页编辑软件或平台提供的绘图工具，当然也可以是其它的绘图工具进行绘图，之后嵌入网页。这里的网页也不是限定于网站页面，可以是任何的面向用户的页面，例如微信公众号后台页面、APP中用户页面等。设定形状的图案，可以是简单的几何图形，也可以是设计好的卡通形象，目的在于吸引用户的注意进行互动操作。本实施例对图案的具体设计不做限定。最常见的网页绘图工具是HTML5提供的canvas功能。Canvas对象表示一个HTML画布元素-<canvas>。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过C本文档来自技高网...

【技术保护点】
一种页面动画展示方法，其特征在于，包括：根据网页绘图功能，绘制设定形状的图案；接收用户的手势互动操作；根据所述手势互动操作改变所述图案的形状。

【技术特征摘要】
1.一种页面动画展示方法，其特征在于，包括：根据网页绘图功能，绘制设定形状的图案；接收用户的手势互动操作；根据所述手势互动操作改变所述图案的形状。2.如权利要求1所述的方法，其特征在于，所述方法还包括：根据网页绘图功能，绘制一系列设定形状的图案；所述一系列设定形状的图案中包括各种设定形状图案的变形图案。3.如权利要求2所述的方法，其特征在于，所述方法还包括：所述变形图案模拟真实的图案操作而产生的变形绘制。4.如权利要求1所述的方法，其特征在于，所述方法还包括：改变所述图案的形状时，同时播放设定的音频、视频和/或文字内容信息。5.如权利要求1所述的方法，其特征在于，所述方法还包括：所述网页绘图功能为HTML5提供的canvas功能。6.如权利要求1所述的方法，其特征在于，所述方...

【专利技术属性】
技术研发人员：陈杰，
申请(专利权)人：天脉聚源北京科技有限公司，
类型：发明
国别省市：北京;11