本發(fā)明涉及互聯(lián)網(wǎng)技術領域，特別涉及一種頁面動畫展示方法及系統(tǒng)。

背景技術：

隨著互聯(lián)網(wǎng)技術的發(fā)展，越來越多的用戶每天都需要在互聯(lián)網(wǎng)上進行信息瀏覽、互動操作等，而網(wǎng)站網(wǎng)頁的設計就變得非常重要，友好的交互界面顯然可以帶給用戶良好的體驗。

網(wǎng)站伴隨著網(wǎng)絡的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡的頻繁而變得非常的重要。由于企業(yè)需要通過網(wǎng)站呈現(xiàn)產(chǎn)品、服務、理念、文化，或向受眾提供某種功能服務。網(wǎng)頁通常包括如下的元素信息：

文本：文本是網(wǎng)頁上最重要的信息載體和交流工具，網(wǎng)頁中的主要信息一般都以文本形式為主。

圖像：圖像元素在網(wǎng)頁中具有提供信息并展示直觀形象的作用。

靜態(tài)圖像：在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

動畫圖像：通常動畫為GIF和SVG。

Flash動畫：動畫在網(wǎng)頁中的作用是有效地吸引訪問者更多的注意。

聲音：聲音是多媒體和視頻網(wǎng)頁重要的組成部分。

視頻：視頻文件的采用是網(wǎng)頁效果更加精彩且富有動感。

表格：表格是在網(wǎng)頁中用來控制面業(yè)信息的布局方式。

導航欄：導航欄在網(wǎng)頁中是一組超鏈接，其連接的目的端是網(wǎng)頁中重要的頁面。

交互式表單：表單在網(wǎng)頁中通常用來聯(lián)系數(shù)據(jù)庫并接受訪問用戶在瀏覽器 端輸入的數(shù)據(jù)。利用服務器的數(shù)據(jù)庫為客戶端與服務器端提供更多的互動。

網(wǎng)頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。專業(yè)的網(wǎng)頁設計，需要經(jīng)歷以下幾個階段：

需要根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，從而建立起營銷模型。

以業(yè)務目標為中心進行功能策劃，制作出欄目結構關系圖。

以滿足用戶體驗設計為目標，使用axure rp或同類軟件進行頁面策劃，制作出交互用例。

以頁面精美化設計為目標，使用PS、AI等軟件，調(diào)整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

根據(jù)用戶反饋，進行頁面設計調(diào)整，以達到最優(yōu)效果。

網(wǎng)頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處。

版式設計通過文字圖形的空間組合，表達出和諧與美。

多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要求處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。為了達到最佳的視覺表現(xiàn)效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。

色彩是藝術表現(xiàn)的要素之一。在網(wǎng)頁設計中，設計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合.搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。如果企業(yè)有CIS(企業(yè)形象識別系統(tǒng))，應按照其中的VI進行色彩運用。

為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結構，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。

靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

網(wǎng)絡上的三維空間是一個假想空間，這種空間關系需借助動靜變化.圖像 的比例關系等空間因素表現(xiàn)出來。在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構成的空間層次不太適合網(wǎng)頁設計，根據(jù)現(xiàn)有瀏覽器的特點，網(wǎng)頁設計適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強節(jié)奏的空間層次，視覺效果強烈。

網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關系，以及疏密的位置關系所產(chǎn)生的空間層次，這兩種位置關系使產(chǎn)生的空間層次富有彈性，同時也讓人產(chǎn)生輕松或緊迫的心理感受。

現(xiàn)有技術中，通過對于網(wǎng)頁設計以及提高互動性的方案越來越多，但是，各種設計方案良莠不齊，帶給用戶的體驗也差別很大。更多的是，其中對于用戶互動動畫的設計都比較少，不能滿足用戶虛擬現(xiàn)實界面的需求。因而，亟需要一種新的網(wǎng)頁互動動畫設計的方案，以提高用戶體驗度。

技術實現(xiàn)要素：

本發(fā)明提供一種頁面動畫展示方法及系統(tǒng)，用以解決現(xiàn)有技術中無法根據(jù)用戶需要提供互動動畫設計的問題。

本發(fā)明提供一種頁面動畫展示方法，包括：

根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；

接收用戶的手勢互動操作；

根據(jù)所述手勢互動操作改變所述圖案的形狀。

所述方法還包括：

根據(jù)網(wǎng)頁繪圖功能，繪制一系列設定形狀的圖案；所述一系列設定形狀的圖案中包括各種設定形狀圖案的變形圖案。

所述方法還包括：

所述變形圖案模擬真實的圖案操作而產(chǎn)生的變形繪制。

所述方法還包括：

改變所述圖案的形狀時，同時播放設定的音頻、視頻和/或文字內(nèi)容信息。

所述方法還包括：

所述網(wǎng)頁繪圖功能為HTML5提供的canvas功能。

所述方法還包括：

所述改變所述圖案的形狀為動畫展示。

一種頁面動畫展示系統(tǒng)，包括：

繪圖單元，用于根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；

互動接收單元，用于接收用戶的手勢互動操作并發(fā)送動畫展示單元；

動畫展示單元，用于根據(jù)所述手勢互動操作改變所述圖案的形狀。

所述繪圖單元還用于根據(jù)網(wǎng)頁繪圖功能，繪制一系列設定形狀的圖案；所述一系列設定形狀的圖案中包括各種設定形狀圖案的變形圖案。

所述系統(tǒng)還包括多媒體展示單元，用于在所述動畫展示單元改變所述圖案的形狀時，同時播放設定的音頻、視頻和/或文字內(nèi)容信息。

所述繪圖單元還用于利用HTML5提供的canvas功能繪制相應圖案。

本發(fā)明實施例中，通過根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；接收用戶的手勢互動操作；根據(jù)所述手勢互動操作改變所述圖案的形狀。本發(fā)明實施例的方案，能夠在頁面上顯示一個設定的卡通形象圖案，根據(jù)用戶的手勢操作，該卡通圖案會相應的變形和改變，從而帶給用戶互動的樂趣，豐富用戶互動體驗，從而極大的提高了用戶體驗度。

本發(fā)明的其它特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點可通過在所寫的說明書、權利要求書、以及附圖中所特別指出的結構來實現(xiàn)和獲得。

下面通過附圖和實施例，對本發(fā)明的技術方案做進一步的詳細描述。

附圖說明

附圖用來提供對本發(fā)明的進一步理解，并且構成說明書的一部分，與本發(fā)明的實施例一起用于解釋本發(fā)明，并不構成對本發(fā)明的限制。在附圖中：

圖1為本發(fā)明實施例1提供的一種頁面動畫展示方法原理流程圖；

圖2為本發(fā)明實施例2提供的一種頁面動畫展示系統(tǒng)結構示意圖。

具體實施方式

以下結合附圖對本發(fā)明的優(yōu)選實施例進行說明，應當理解，此處所描述的優(yōu)選實施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。

如圖1所示，為本發(fā)明實施例1提供的一種頁面動畫展示方法原理流程圖，其中，

步驟11，根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案。

網(wǎng)頁繪圖功能，通常是網(wǎng)頁編輯軟件或平臺提供的繪圖工具，當然也可以是其它的繪圖工具進行繪圖，之后嵌入網(wǎng)頁。這里的網(wǎng)頁也不是限定于網(wǎng)站頁面，可以是任何的面向用戶的頁面，例如微信公眾號后臺頁面、APP中用戶頁面等。

設定形狀的圖案，可以是簡單的幾何圖形，也可以是設計好的卡通形象，目的在于吸引用戶的注意進行互動操作。本實施例對圖案的具體設計不做限定。

最常見的網(wǎng)頁繪圖工具是HTML5提供的canvas功能。

Canvas對象表示一個HTML畫布元素-<canvas>。它沒有自己的行為，但是定義了一個API支持腳本化客戶端繪圖操作。

可以直接在該對象上指定寬度和高度，但是，其大多數(shù)功能都可以通過CanvasRenderingContext2D對象獲得。這是通過Canvas對象的getContext()方法并且把直接量字符串"2d"作為唯一的參數(shù)傳遞給它而獲得的。

<canvas>標記在Safari 1.3中引入，在制作此參考頁時，它在Firefox 1.5和Opera 9中也得到了支持。在IE中，<canvas>標記及其API可以使用位 于excanvas點sourceforge點net的ExplorerCanvas開源項目來模擬。

大多數(shù)Canvas繪圖API都沒有定義在<canvas>元素本身上，而是定義在通過畫布的getContext()方法獲得的一個“繪圖環(huán)境”對象上。

Canvas API也使用了路徑的表示法。但是，路徑由一系列的方法調(diào)用來定義，而不是描述為字母和數(shù)字的字符串，比如調(diào)用beginPath()和arc()方法。

一旦定義了路徑，其他的方法，如fill()，都是對此路徑操作。繪圖環(huán)境的各種屬性，比如fillStyle，說明了這些操作如何使用。

HTML5canvas是一個原生HTML繪圖簿，用于JavaScript代碼，不使用第三方工具。跨所有web瀏覽器的完整HTML5支持還沒有完成，但在新興的支持中，canvas已經(jīng)可以在幾乎所有現(xiàn)代瀏覽器上良好運行了，但Windows Internet Explorer除外。幸運的是，一個解決方案已經(jīng)出現(xiàn)，將Internet Explorer也包含進來。

本質(zhì)上，canvas元素是一個白板，直到您在它上面“繪制”一些可視內(nèi)容。與擁有各種畫筆的藝術家不同，您使用不同的方法在canvas上作畫。您甚至可以在canvas上創(chuàng)建并操作動畫，這不是使用畫筆和油彩所能夠?qū)崿F(xiàn)的。

新的HTML canvas元素，從簡單地包含一個canvas元素到高級JavaScript交互(動畫的關鍵)逐步進行演示。學習如何在一個web頁面上顯示canvas。本文針對web設計師和開發(fā)人員，盡管JavaScript知識不是必須的，但理解該語言的運行方式將有所幫助。但是，HTML知識是關鍵所在，尤其是如何創(chuàng)建一個基本web頁面。

Canvas對象的屬性主要包括如下幾個：

height屬性。

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數(shù)像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經(jīng)完成的任何繪圖都會擦除掉。默認值是300。

width屬性。

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數(shù)像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經(jīng)完成的任何繪圖都會擦除掉。默認值是300。

<canvas>標記和SVG以及VML之間的一個重要的不同是，<canvas>有一個基于JavaScript的繪圖API，而SVG和VML使用一個XML文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG繪圖很容易編輯，只要從其描述中移除元素就行。

要從同一圖形的一個<canvas>標記中移除元素，往往需要擦掉繪圖重新繪制它。

本實施例中，利用canvas功能繪制相應的圖案，然后將該圖案顯示在頁面上。用戶瀏覽網(wǎng)頁的時候可以直觀的看到該圖案。

實際上，根據(jù)網(wǎng)頁繪圖功能，需要繪制一系列設定形狀的圖案；所述一系列設定形狀的圖案中包括各種設定形狀圖案的變形圖案。這是因為要實現(xiàn)動畫的效果，就需要多個圖案進行切換，從而展示給用戶動畫效果。這需要在設計圖案的時候就設計一系列的圖案，包括所有圖案的各種變形效果，從而支持后續(xù)的用戶操作。

所述變形圖案模擬真實的圖案操作而產(chǎn)生的變形繪制。這里，對于一系列的圖案不是隨便設定的，是根據(jù)可能出現(xiàn)的操作而設定的。例如，可以將圖案拉伸、壓縮、扭曲等多種操作，從而需要設計原始圖案在經(jīng)過這些操作后的圖案。

步驟12，接收用戶的手勢互動操作。

隨著技術的進步，觸控操作越來越普及。而手勢識別和手勢輸入得到了很大的普及。本實施例中，為了更好的配合動畫展示，需要識別用戶的手勢互動操作，也就是手勢輸入和手勢識別。當然，本實施例也不限定于手勢互動操作， 只要可以實現(xiàn)與用戶的操作互動，則用戶的任何操作都是可行的。

例如，移動終端或者平板電腦現(xiàn)在都實現(xiàn)了手勢識別，用戶可以在這些終端上直接進行手勢互動的操作輸入，后臺僅需要獲取用戶的手勢輸入即可。

目前的手勢識別主要集中于多點觸控等領域。本實施例的手勢識別包括觸控屏幕的觸控手勢識別。

多點觸控(又稱多重觸控、多點感應、多重感應，英譯為Multitouch或Multi-Touch)是采用人機交互技術與硬件設備共同實現(xiàn)的技術，能在沒有傳統(tǒng)輸入設備(如：鼠標、鍵盤等。)下進行計算機的人機交互操作。多點觸摸技術，能構成一個觸摸屏(屏幕，桌面，墻壁等)或觸控板，都能夠同時接受來自屏幕上多個點進行計算機的人機交互操作。

多點觸控是在同一顯示界面上的多點或多用戶的交互操作模式，摒棄了鍵盤、鼠標的單點操作方式。

用戶可通過雙手進行單點觸摸，也可以以單擊、雙擊、平移、按壓、滾動以及旋轉(zhuǎn)等不同手勢觸摸屏幕，實現(xiàn)隨心所欲地操控，從而更好更全面地了解對象的相關特征(文字、錄像、圖片、衛(wèi)片、三維模擬等信息)。

可根據(jù)客戶需求，訂制相應的觸控板，觸摸軟件以及多媒體系統(tǒng)；可以與專業(yè)圖形軟件配合使用。

步驟13，根據(jù)所述手勢互動操作改變所述圖案的形狀。

接收到用戶的手勢互動操作后，識別用戶手勢，并判定是否是針對圖案操作的。如果是，則相應的根據(jù)用戶手勢的意圖，對圖案進行相應的變形。變形之后的圖案也是預先設定的。

為了更好的用戶體驗，在改變所述圖案的形狀時，同時播放設定的音頻、視頻和/或文字內(nèi)容信息。也就是說，在圖案形狀改變時，還可以同步的播放聲音、文字或者視頻等，從而使得整體圖案變形對用戶手勢操作的相應更為直觀有趣。

這里，圖案的形狀通常是卡通形象，也可以是簡單圖案。

本發(fā)明實施例中，利用HTML5的canvas功能，編輯任意形狀的圖片，該圖片可以根據(jù)手勢動作模擬出真實的變形效果，進行展示。通過獲取用戶操作手勢作出不同響應，模擬真實效果。并且，可以同時配置一些音效、文字等操作結果，實現(xiàn)與用戶的模擬互動功能，提高用戶的體驗度。

通過根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；接收用戶的手勢互動操作；根據(jù)所述手勢互動操作改變所述圖案的形狀。本發(fā)明實施例的方案，能夠在頁面上顯示一個設定的卡通形象圖案，根據(jù)用戶的手勢操作，該卡通圖案會相應的變形和改變，從而帶給用戶互動的樂趣，豐富用戶互動體驗，從而極大的提高了用戶體驗度。

如圖2所示，為本發(fā)明實施例2提供的一種頁面動畫展示系統(tǒng)結構示意圖，其中，

繪圖單元21，用于根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；

互動接收單元22，用于接收用戶的手勢互動操作并發(fā)送動畫展示單元23；

動畫展示單元23，用于根據(jù)所述手勢互動操作改變所述圖案的形狀。

進一步的，所述繪圖單元21還用于根據(jù)網(wǎng)頁繪圖功能，繪制一系列設定形狀的圖案；所述一系列設定形狀的圖案中包括各種設定形狀圖案的變形圖案。

進一步的，所述系統(tǒng)還包括多媒體展示單元24，用于在所述動畫展示單元23改變所述圖案的形狀時，同時播放設定的音頻、視頻和/或文字內(nèi)容信息。

進一步的，所述繪圖單元21還用于利用HTML5提供的canvas功能繪制相應圖案。

綜上所述，本發(fā)明實施例中，通過根據(jù)網(wǎng)頁繪圖功能，繪制設定形狀的圖案；接收用戶的手勢互動操作；根據(jù)所述手勢互動操作改變所述圖案的形狀。本發(fā)明實施例的方案，能夠在頁面上顯示一個設定的卡通形象圖案，根據(jù)用戶 的手勢操作，該卡通圖案會相應的變形和改變，從而帶給用戶互動的樂趣，豐富用戶互動體驗，從而極大的提高了用戶體驗度。

本領域內(nèi)的技術人員應明白，本發(fā)明的實施例可提供為方法、系統(tǒng)、或計算機程序產(chǎn)品。因此，本發(fā)明可采用完全硬件實施例、完全軟件實施例、或結合軟件和硬件方面的實施例的形式。而且，本發(fā)明可采用在一個或多個其中包含有計算機可用程序代碼的計算機可用存儲介質(zhì)(包括但不限于磁盤存儲器和光學存儲器等)上實施的計算機程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實施例的方法、設備(系統(tǒng))、和計算機程序產(chǎn)品的流程圖和/或方框圖來描述的。應理解可由計算機程序指令實現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結合。可提供這些計算機程序指令到通用計算機、專用計算機、嵌入式處理機或其他可編程數(shù)據(jù)處理設備的處理器以產(chǎn)生一個機器，使得通過計算機或其他可編程數(shù)據(jù)處理設備的處理器執(zhí)行的指令產(chǎn)生用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。

這些計算機程序指令也可存儲在能引導計算機或其他可編程數(shù)據(jù)處理設備以特定方式工作的計算機可讀存儲器中，使得存儲在該計算機可讀存儲器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。

這些計算機程序指令也可裝載到計算機或其他可編程數(shù)據(jù)處理設備上，使得在計算機或其他可編程設備上執(zhí)行一系列操作步驟以產(chǎn)生計算機實現(xiàn)的處理，從而在計算機或其他可編程設備上執(zhí)行的指令提供用于實現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。

顯然，本領域的技術人員可以對本發(fā)明進行各種改動和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權利要求及其等同技術的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動和變型在內(nèi)。