基于5和mysql的輕量型動畫引擎的設(shè)計與實現(xiàn)

基于5和mysql的輕量型動畫引擎的設(shè)計與實現(xiàn)

0吸引大量作為互聯(lián)網(wǎng)的人設(shè)和場景作為一種新興的媒體，網(wǎng)絡(luò)已成為一個越來越大的平臺，以展示網(wǎng)絡(luò)游戲和電子商務(wù)的背景。相比傳統(tǒng)媒介,它最突出的優(yōu)勢就是圖片展示和動畫展示。試想,當(dāng)打開一款優(yōu)秀的網(wǎng)絡(luò)游戲時,最先被吸引到的一定是精美的人設(shè)和場景;而當(dāng)打開淘寶網(wǎng)的主頁時,一定首先被搜索框下面的大幅滾動圖片廣告吸引。所以,作為眾多商家和企業(yè)宣傳自身的重要平臺,互聯(lián)網(wǎng)在如今的電子商務(wù)和電子產(chǎn)品中,顯得非常重要,而鋪天蓋地的動態(tài)圖片展示自然也成為網(wǎng)站盈利的重要組成部分,如何快速地制作精美的動畫,從而吸引人們的注意,漸漸成為網(wǎng)頁設(shè)計者們所關(guān)注的問題。1動畫結(jié)構(gòu)1.1d幀動畫技術(shù)游戲的核心在于動畫,沒有動畫,就只能玩一些猜字和數(shù)獨等小游戲;而廣告的本質(zhì)也是動畫。因此,動畫編程在游戲編程和廣告設(shè)計中是非常重要的。動畫其實只是一系列快速顯示的、只有微小差別的圖像,由于人眼的敏感性較低,所以會認(rèn)為這些變化就是移動。人眼能夠感覺到的動畫是至少每秒12幀,即每秒更換12幅圖片,但為了良好的動畫效果,一般的動畫采用的是24幀每秒。在動畫編程的同時,需要考慮的是處理器和系統(tǒng)的負(fù)擔(dān),因此為了平衡動畫的幀數(shù)和系統(tǒng)的負(fù)擔(dān),會根據(jù)不同的需要設(shè)置合適的更新時間間隔。2D幀動畫是最基本的動畫技術(shù),它主要是通過顯示一系列預(yù)先生成的、靜態(tài)的幀圖像來實現(xiàn)動畫。雖然目前已經(jīng)有各種各樣的技術(shù)可以幫助人們制作一個完整,甚至精美的動畫,但是還是希望可以找到一個方法,在保證質(zhì)量的同時,追求效率。動畫框架就可以滿足這項需求。動畫框架一般包括基本的繪制和更新函數(shù),只需要利用框架的函數(shù),就可以很簡潔、方便地實現(xiàn)動畫功能。利用動畫框架制作動畫,可修改性強(qiáng),可以很方便地通過動畫的某些特征檢索并修改、刪減該動畫;可擴(kuò)展性也很強(qiáng),利用已有基礎(chǔ)動畫類型,修改部分參數(shù)就可以創(chuàng)建一個新的動畫類型;代碼復(fù)用率高,使得編程變得更高效。1.2遵循web抓圖3d畫面渲染的方法目前實現(xiàn)網(wǎng)頁動畫的途徑主要有AdobeFlash、第三方插件和HTML5,三者各有特點。Flash是較為傳統(tǒng)的技術(shù),使用面積最廣,目前市面上超過75%的網(wǎng)頁游戲及動畫都基于該技術(shù)。2012年Flash11推出后,能良好地實現(xiàn)3D畫面渲染,較過去有很大改善。使用第三方插件運行的網(wǎng)頁動畫也占有著一定比例,插件擴(kuò)展了瀏覽器的功能,但同時帶來了插件安裝的麻煩,以及潛在的安全隱患。HTML5是實現(xiàn)網(wǎng)頁動畫的一條新途徑。Canvas元素、WebSocket技術(shù)以及WebGL標(biāo)準(zhǔn)的出現(xiàn),為網(wǎng)頁提供了新的編程接口,使網(wǎng)頁游戲開發(fā)更加便捷。與其他技術(shù)相比,HTML5有兩點主要優(yōu)勢,首先HT-ML5標(biāo)準(zhǔn)及其相關(guān)技術(shù)均免費開放,規(guī)范并且易于推廣;另外HTML5標(biāo)準(zhǔn)免去了安裝插件的必要,減少了用戶的麻煩,提高了安全性。2基于東南角及其及其他模擬圖像的動畫框架對于一款游戲框架而言,動畫框架是其最基本的繪制顯示子部分,而對于廣告制作,只需要最基本的繪制和濾鏡等功能即可,不要諸如碰撞檢測、人機(jī)交互等功能。所以,從根本上講,動畫框架就是加入了輸入輸出和碰撞檢測等功能的繪制框架。從細(xì)節(jié)上,基于HTML5和JavaScript的動畫框架可以完成以下工作:(1)圖形繪制:動態(tài)圖形需要繪制在畫布上,才能展現(xiàn)在觀眾和玩家面前;(2)路徑設(shè)置:大部分動畫不是固定在畫布上某一個位置的,比如一條魚,它往往會在大海中游來游去,不會靜止在某一個固定的地方,所以設(shè)置移動路徑和移動速度也是賦予動畫靈魂的關(guān)鍵;(3)濾鏡效果:有些時候,希望給動畫添加一些PS效果,以增加一些真實感,比如將魚的透明度進(jìn)行設(shè)置,以模仿不同深度的魚;(4)物理效果:為了提高真實感,希望動畫中的角色遵循正確的物理原理,展現(xiàn)出和現(xiàn)實生活中一樣的物理效果,所以物理效果的添加對于一個動畫的真實感十分關(guān)鍵。2.1對象類所體現(xiàn)的工具類動畫框架分為三部分:舞臺類、對象類、工具類。為了方便控制和操作,將所有的動畫實例放在一個舞臺上,只需要像個導(dǎo)演一樣總的調(diào)控、控制舞臺即可,這個舞臺即由舞臺類實例化得到,這里,舞臺類僅包括一個類。它可以實現(xiàn)舞臺初始化、繪制所有動畫等功能。舞臺類也是直接面向用戶的接口層,用戶只需要搞清楚這個類的基本用法就可以繪制最基本的動畫。對象類的實例就是舞臺上的一個一個動畫,所以,對象類的功能就是創(chuàng)建動畫。它包含動畫類、魚實例類、太陽實例類三個類?？梢詫崿F(xiàn)圖片分割、圖片繪制、路徑設(shè)置、添加濾鏡、添加物理效果等基礎(chǔ)功能。圖片分割可以將一幅多幀圖片分割為一幀一幀的圖片,并將其存入數(shù)組,這個步驟一般在初始化時完成,所以繪制時無需再分割圖片,可以大幅度提高繪制速度;路徑設(shè)置即根據(jù)用戶設(shè)置的參數(shù):動畫的初始位置以及速度,計算每幀圖片顯示的具體位置;濾鏡函數(shù)可以為圖片添加不同的濾鏡效果,以增加真實感;添加物理效果可以使動畫角色表現(xiàn)出諸如自由落體運動、勻速直線運動、反彈之類的物理效果,使得動畫真實感更強(qiáng);利用繪制函數(shù),將已經(jīng)準(zhǔn)備就緒的圖片繪制在畫布上。魚實例類、太陽實例類兩個類繼承自動畫類,只是重載了動畫的路徑設(shè)置功能,用戶可根據(jù)自身需求,擴(kuò)展其他的動畫實例類。這里的工具類主要功能是為對象類提供具體的濾鏡算法,有高斯模糊、色彩變換、透明度設(shè)置等多個類。它們之間不存在繼承關(guān)系。2.2ml5+web-cript語言框架該動畫框架的開發(fā)過程中,使用HTML5+JavaS-cript語言,該框架的結(jié)構(gòu)圖如圖1所示。下面按照功能分類來介紹一下這個動畫框架。2.2.1舞臺表演舞臺類只包含stage類,主要包括兩個功能,初始化和繪制舞臺。(1)多幀圖像的自動生成算法在動畫的實現(xiàn)初始化函數(shù)—initialization,遍歷整個傳入舞臺的圖片數(shù)組,根據(jù)每一項中的type參數(shù),創(chuàng)建相對應(yīng)的對象實例,并將其放入舞臺中。緊接著,完成初始化過程中最重要的一步,調(diào)用濾鏡函數(shù),分割多幀圖片,將每一幀存入數(shù)組中,方便接下來繪圖使用。同時,如果該對象需要使用濾鏡,也在這里完成,這樣數(shù)組中保存的圖片就是切割好,已經(jīng)添加過濾鏡的,繪圖函數(shù)可以直接使用。這里傳入舞臺的圖片數(shù)據(jù)數(shù)組保存了整個動畫中所有的數(shù)據(jù),動畫框架會根據(jù)這個數(shù)組自動創(chuàng)建相應(yīng)對象實例,添加濾鏡、設(shè)置關(guān)鍵幀、分割圖片、添加物理效果、設(shè)置路徑,最后完成繪制。用戶在編程時,只需要根據(jù)數(shù)組中對象的名稱,填入正確的數(shù)據(jù)即可,對于不熟悉JS,甚至完全不懂JS的用戶都非常容易實現(xiàn)。(2)繪制合適幀該函數(shù)會由用戶在外部,每隔一段時間調(diào)用一次,它會清除整個畫布,然后遍歷整個圖片數(shù)組,將其中的每一個對象的合適幀繪制在舞臺上。究竟繪制第幾幀,將由函數(shù)的入口參數(shù)決定。2.2.2對象類對象類包括sprite類、fish類、sun類。其中sprite是基類,下面重點介紹它。(1)牛皮糖的包裝為了保證接下來的繪圖速度,首先需要切割圖片。其實這里的原理很簡單,就像是包裝牛皮糖。制作好的牛皮糖都是一整張,很多很多個糖,而包裝紙是一塊糖一張的,師傅們會按照一塊糖的尺寸把整張牛皮糖剪成一塊一塊的,一張?zhí)羌埛湃胍粔K。然后把包裝好的糖放入大的包裝袋中,這樣就把整塊的牛皮糖,變成了一袋獨立包裝的牛皮糖,當(dāng)你想吃某一塊或者把哪一塊送給朋友時,你只需要對這一塊進(jìn)行操作就好。同樣的道理,這里把整張的牛皮糖換成一幅多幀圖片,然后把包裝紙換成一幅幅canvas畫布,按照每幀圖片的尺寸,將它們剪下,依次貼在畫布上,然后把畫有單幀圖片的畫布們放入數(shù)組,這樣就也得到一袋獨立包裝的“牛皮糖”了。當(dāng)需要繪制某一幀圖片時,找到對應(yīng)的那塊“牛皮糖”,對它進(jìn)行操作就好了。(2)牛皮糖的制作很多時候,往往希望舞臺上的動畫各自呈現(xiàn)不同的濾鏡效果,比如兩條一樣的魚,希望小一點的那條魚透明度高一點,而大一點的透明度低一點,這樣看起來,那條小一點的就像是離得較遠(yuǎn),大的那條離得近一樣。所以相比簡單地給整個畫布添加某一個濾鏡,給單個動畫添加動畫顯得更明智一些,但是同樣也麻煩一些。這就相當(dāng)于有人愛吃包著糖霜的牛皮糖,有人不喜歡。相比直接在牛皮糖制作時放入糖霜,讓每一張牛皮糖都變得一模一樣,師傅們只需要在賣給顧客時根據(jù)他們的要求,在把包裝好的糖放入大包裝時,將賣給要糖霜的顧客們的牛皮糖裹上糖霜就好。好在每一幅圖片在初始化階段的第一步已經(jīng)變成了一袋獨立包裝的“牛皮糖“,所以只需要在將“小魚牌牛皮糖”放入大包裝袋時,讓它里面的每一顆糖都變透明一點就好。濾鏡可以實現(xiàn)高斯模糊、色彩變換、透明度變換等功能,sprite類會根據(jù)入口參數(shù)中filterType來決定添加哪項濾鏡效果。(3)movd函數(shù)的變化為了使動畫動起來,更有生氣,更形象,需要為它們設(shè)置路徑。這里有三種基本的移動方式,sprite默認(rèn)的運動方式是勻速直線運動。根據(jù)入口參數(shù)的初始位置和終止位置,除以動畫存在的時間,計算出兩個方向上的平均速度。勻速直線運動可以滿足基本的汽車、人物等大多數(shù)動畫要求。Fish類重載了move函數(shù),定義了另外一種路徑設(shè)置方式。如果魚在大海中直線前進(jìn),真實感很弱,所以為了體現(xiàn)魚沉浮的狀態(tài),這里將魚的路徑設(shè)置為一個弧度較小的弧線。以開始點和結(jié)束點間的距離作為圓弧半徑,將開始點和結(jié)束點作為圓弧上兩點,繪制一個60°圓弧作為fish的軌跡。將60°除以對象存在時間平均分為若干份,對象每秒滑過其中一份,據(jù)此利用幾何原理計算出fish的運動速度。Sun類同樣重載了move函數(shù)。這里move函數(shù)模擬太陽一天中東升西落,采用半圓路徑。以開始點和結(jié)束點間的距離的一半作為圓弧半徑,將開始點和結(jié)束點作為圓弧上兩點,繪制一個180°圓弧—即半圓作為sun的軌跡。將180°除以對象存在時間平均分為若干份,對象每秒滑過其中一份,據(jù)此利用幾何原理計算出sun的運動速度。用戶還可以自行擴(kuò)展該框架,重載move函數(shù),創(chuàng)建不同的路徑設(shè)置函數(shù)。(4)計算解決條件型的自由落體運動函數(shù)現(xiàn)實生活中,物理效果無所不在,十分復(fù)雜。但是動畫中并不要求把所有的物理效果均展現(xiàn)出來。比如需要制作一個模擬小球自由落體或者平拋運動的動畫課件,只需要考慮重力因素就可以了,因為空氣和小球的摩擦系數(shù)很小,摩擦力完全可以忽略不計。所以,該動畫框架中封裝了一些最常用的物理效果,并未包羅萬象。該動畫框架中包含的物理效果有平拋運動、摩擦力、反彈等常用的基本原理。①平拋運動是最常用的物理效果,調(diào)用該物理效果函數(shù)時,用戶只需要給定水平速度和距離地面的高度兩個參數(shù)即可。根據(jù)物體距離底面高度h,可以計算出物體落地時間為:。設(shè)時間t0時,物體的位置是(x0,y0),經(jīng)過時間Δt,物體的水平位置很好計算,即Δt·v+x0,而垂直位置為:,根據(jù)舞臺設(shè)置的刷新時間間隔,設(shè)置Δt,每次調(diào)用路徑設(shè)置函數(shù)時,刷新物體的位置。自由落體運動是平拋運動的一種特殊情況,當(dāng)v=0時,平拋運動轉(zhuǎn)換為自由落體運動,所以模擬自由落體效果時,不需要重新編寫函數(shù),調(diào)用平拋運動函數(shù)即可實現(xiàn)。②雖然中學(xué)物理題中,常常會假定摩擦力忽略不計,但是現(xiàn)實生活中摩擦力很多時候并不能忽略不計,需要時時刻刻考慮摩擦力對物理效果的影響。不過好在模擬摩擦力并不麻煩,根據(jù)動摩擦力公式F=μT,T為物理作用在接觸面上垂直于接觸面的壓力,而大多數(shù)情況物體都是水平放置的,所以F=μmg。只需要在水平方向?qū)⑽矬w的速度v添加一個消減因子,-μgt(t是作用時間)即可。需要注意的是考慮摩擦力的情況下,摩擦力的方向隨著運動方向變化,永遠(yuǎn)同運動方向反向。③經(jīng)常會看到類似小鋼珠或者網(wǎng)球之類的球體自由落體掉在地面上反彈起來的動畫,這類動畫似乎因為反彈這一個小小的細(xì)節(jié)而變得非常生動,所以為了使得制作的動畫更逼真、有靈動感,特別添加了反彈特效。反彈的原理很簡單,物體打在另一個物體時,會在摩擦力的作用下,消減物體垂直于被作用物體表面方向的速度。如果被打物體是不規(guī)則形,那么作用力方向和大小較難確定,而現(xiàn)實生活中也并不常常遇到,所以只考慮小球垂直于水平面、垂直于豎直面和兩小球彈性碰撞三種情況。調(diào)用該物理效果函數(shù)時,用戶需要指定彈性消除因子的大小,這個因子會隨著兩個碰撞物體的材質(zhì)不同而存在非常大的不同。比如把一個鋼珠丟到一個木板上,鋼珠一般會彈起來,但是如果把一個球狀的糯米糍丟在一樣的木板上,糯米糍是一定不會反彈起來的。這是因為糯米糍表面的摩擦因子非常大,導(dǎo)致它和木板碰撞時的彈性消除因子也非常大,它豎直方向速度瞬時間被消減至0。假設(shè)某物體垂直與某水平板相撞,末速度為v,消減因子為η,則該物體被反彈起來的垂直向上的初速度為-v(1-η)(參考系以豎直向下為正方向)。水平方向原理一樣,只需要把y軸換做x軸即可。如果是兩個小球彈性碰撞,則將y軸換做小球運動方向即可。如果兩小球完全彈性碰撞,那么η=0。(5)開燈動作的動畫設(shè)置設(shè)置好上面所有顯示方法之后,還需要設(shè)置動畫顯示幀。很多時候,希望每一幀顯示的時間不一樣長,比如一個開燈的動畫中,開燈只是一瞬間的事情,希望燈亮前的黑暗狀態(tài)和燈亮后的明亮狀態(tài)長一些。這里利用關(guān)鍵幀來實現(xiàn),將開燈動作的動畫設(shè)置只顯示一次或少數(shù)次,將動作前和動作后的動畫設(shè)置多次,即可模擬這個動畫。在一個汽車下坡的動畫中,汽車在坡頂?shù)乃俣葢?yīng)該較慢,而在坡底的時間則應(yīng)該較快,這里可以按照牛頓第二定律,設(shè)置汽車在坡頂?shù)膭赢嬔h(huán)多次,而在坡底的動畫循環(huán)次數(shù)少一些,就可以真實呈現(xiàn)這一物理情景。制作動畫過程中,用戶也可以利用函數(shù)修改動畫的緩動或快進(jìn)效果,通過將某一幀的顯示次數(shù)減少來模擬快進(jìn),而將某一幀的顯示次數(shù)增加來模擬緩動,十分容易。(6)兩組圖文創(chuàng)作方法到此,已經(jīng)做好了一切前期準(zhǔn)備工作,接下來需要做的是將圖片繪制到畫布上。這里利用HTML5的canvas標(biāo)簽,canvas就像一個畫冊一樣,每一個canvas元素都有一個繪圖上下文,相當(dāng)于這本畫冊中的一頁,可以在canvas繪圖上下文上繪制任意圖形。支持HT-ML5canvas標(biāo)簽的瀏覽器支持多個繪圖上下文,并且通過提供不同的API提供繪制功能。下面簡單介紹一下canvas的基礎(chǔ)用法:a.首先需要創(chuàng)建canvas元素,規(guī)定canvas的id、寬度、高度等屬性;b.然后通過id查找canvas元素,創(chuàng)建一個繪圖上下文,相當(dāng)于根據(jù)畫冊的名字找到畫冊,然后在里面插入一頁空白畫紙,以便待會兒可以開始畫畫;這一段需要利用JavaScript實現(xiàn);c.接下來就可以在定義好的繪圖上下文中繪制任意圖形。canvas支持一系列函數(shù),可以繪制直線、任意曲線、矩形、圓等,利用這些基本函數(shù)可以繪制任意想要的圖形,還支持填充、漸變等;也支持繪制多種格式的圖片;還可以裁剪圖片,以繪制動畫。對象類的繪制利用drawImage函數(shù)實現(xiàn),且支持關(guān)鍵幀繪制。用戶只需要規(guī)定好每次動畫循環(huán)顯示的幀順序和次數(shù),draw函數(shù)會自動根據(jù)設(shè)置顯示動畫,而不是死板地按照多幀圖片的順序來播放動畫,具有更高的靈活性。由上可知,對象類定義了三種動畫運動方式,用戶還可以根據(jù)自己的需求,定義其他的運動方式,這個動畫框架具有很高的可擴(kuò)展性。2.2.3工具類工具類主要封裝了濾鏡函數(shù)具體算法,算法雖然復(fù)雜,但是這部分提供了非常簡單的外部接口給用戶使用。2.3動畫的制作大數(shù)據(jù)采集可提高用戶體驗該動畫框架在普通動畫框架的基礎(chǔ)上,取其精華,去其糟粕,并適當(dāng)添加了新的元素,更貼合現(xiàn)在的需求和最新的技術(shù)特點,使用更方便。它的特點如下:(1)時間軸:用戶只需要在時間軸上創(chuàng)建一個一個的動畫,規(guī)定好每個動畫的出現(xiàn)時間、結(jié)束時間、起點終點,就可以制作一個最簡單的動畫;(2)預(yù)分割:在初始化舞臺時,預(yù)分割所有多幀圖片,將其分割成一幀一幀的,并添加所要求的濾鏡效果,然后存入數(shù)組,使用時只需讀取即可,不必再分割,可以大大提高繪制時間;(3)濾鏡效果:多個基本濾鏡函數(shù)保證用戶可以隨心所欲地PS自己的動畫,展現(xiàn)不一樣的動畫效果;(4)物理效果:多種物理效果函數(shù)可以讓用戶隨心所欲模擬真實場景,增加真實感;(5)答卷式編程:對外用戶接口是一個包含所有信息的數(shù)組,用戶只需要按照數(shù)組中的對象的對象名填寫自己的需求即可,例如初始時間、結(jié)束時間、開始位置、結(jié)束位置、