前沿穿越——HTML5小遊戲 製做技巧&經驗

轉 K米: 前沿穿越——HTML5小遊戲 製做技巧&經驗

hello~你們好，我是黑米！ Ｏ(≧▽≦)Ｏ

今天我來跟你們分享一些動畫實現的相關知識，但願你們可以支持(鞠躬……

我很喜歡很喜歡看動畫片，一直有作出好看動畫片的夢想……因此最近作了很多動畫效果來玩兒，也爲本身之後能夠作出偉大的動畫片打好基礎！

web端動畫表現有很多辦法，我列一些常見的，而後再說說在實現上的一些小技巧。

進入正題，我要開始認真了！(嚴肅臉…… (￣ー￣〃)

嗯……首先你們先來跟我一塊兒玩個遊戲，請快速的掏出手機，打開微信，「掃一掃」下面的二維碼，通關最多的前三名同窗……什麼獎品都沒有！！

相信你們都認真的玩兒了遊戲吧？咱們這裏有一位萬技師一直玩到50多關，最後體力透支，主動「自殺」，不然相信他能玩出過百關，怎麼作到的？有彩蛋，不知道你有沒有發現，哈哈……

嗯……迴歸正題，這個小遊戲當中用到了大量的動畫效果，主要是逐幀動畫，今天的第一部分，就先來說講動畫這個事情。

我先來列一排動畫效果給你們看……

（原文中此圖1已掛）

圖1

圖2

圖3

剛纔上面列的動畫效果分別是 GIF 動畫、Canvas + CSS 動畫、逐幀動畫。其實提及常見的動畫實現，除了 GIF(APNG)、Flash 和 Canvas 外，其餘基本都是 CSS 動畫，即便是經過 JS 實現，大部分狀況下只是經過 JS 來修改 CSS 屬性而已。

而 GIF 動畫僅支持 8 位色，顏色偏少，雖然 APNG 解決了這個問題，可是存在兼容問題，同時它和 GIF 同樣，沒有可控性，因此它們通常不多用於動畫製做流程中，僅用來展現。相對來講 CSS 動畫和 Canvas 動畫的可控性更易於製做頁面效果動畫以及頁面遊戲。

1. 可控性

剛纔說了「可控性」，那到底什麼是可控性？咱們先來看一個動畫效果的大概示意圖！

一段動畫通常由「開始 - 過渡 - 結束」來組成，GIF 動畫是沒法經過代碼來獲取到這些狀態的，但 CSS 動畫能夠！

我這裏的作法是把每一組圖片合成一張「雪碧圖」，而後利用 CSS 的 animation 作逐幀動畫，寫好函數經過不一樣的參數來調用不一樣的角色。

Role(dirt)	Role(rises)	Role(cast)	Role(broken)	Role(death)

合成「雪碧圖」的逐幀動畫

像上面 圖2 和 圖3 的例子，都是由好幾個動畫銜接完成，那麼它們之間如何銜接呢？有的同窗可能會說用 setTimeout/setInterval/requestAnimationFrame 一類的延遲功能來作銜接，可是這樣會有個問題就是在性能不一樣的機器上，會有偏差，並且維護繁瑣。因此，咱們須要一個觸發形式的銜接方式，即上一個動畫完成了，通知下一個動畫開始。

CSS 動畫實現通常使用 animation 和 transition 來搭配其餘屬性使元素產生不一樣變化，從而達到動畫效果。

而這兩個屬性是能夠經過 JS 中的事件來監聽到「開始」和「結束」狀態。具體事件以下：

animationstart：
animationstart 事件在 CSS animation 開始時被觸發。
若是有 animation-delay ，事件將在延遲時效過時以後當即觸發。 若是延遲時效是負值，事件觸發時將帶有等於延遲時效絕對值的 elapsedTime 。
animationend：
animationstart 事件在 CSS animation 完成時被觸發。
transionstart：
transionstart 事件在 CSS transition 過渡開始時被觸發。
transitionend：
transitionend 事件會在 CSS transition 結束後觸發。
當 transition 完成前移除 transition 時，好比移除 CSS 的 transition-property 屬性，事件將不會被觸發。

這些事件在不一樣瀏覽器下須要加前綴什麼的你們應該都懂得，至於 transionstart，目前僅在 IE10+ 上有效……

經過事件監聽的方式銜接，並利用分層的形式疊加多重動畫，最終實現效果：

如今，開始狀態和結束狀態獲取到了，那中間的過渡狀態要怎麼辦呢？好比說我要動畫執行到 30% 的時候，執行一個回調，親一口姐姐，腫麼辦？?(?ε??)

雖然沒有直接的事件能夠監聽到過渡狀態，並且這個需求中也暫時用不到這個過渡狀態監聽，可是咱們也能夠稍微作點事情的。（不拋棄，不放棄！）

怎麼作呢？好比一個動畫的執行時間是10s，那麼在動畫開始的時候，跑一個 setInterval 來不斷的記錄過渡狀態，而後用當前跑到的值和總時長就能算出具體的進度了。這裏要稍微注意一下，由於動畫播放控制（animation-play-state）屬性的存在，在暫停和從新播放時，須要對計時器稍微進行一下處理，不然得出的進度值會有錯誤。

這不是一個很完美的辦法，由於在不一樣的性能下，計時器的值可能會有微弱偏差，但若是你要求並非很精確，仍是能夠嘗試這個辦法的。

2. 如何 Perfect 的兼容各分辨率？

兼容各式屏幕通常有這樣的辦法：

還有這樣的辦法：

最後，還有傳說中的彈性自適應佈局：∑(O_O；)

可是，在這個需求上，通通不適用！爲何？

viewport 和 media Query 在 iOS 和 Android 上識別的單位不一樣，在 iOS 上識別的是「設備像素」，而在 Android 上識別的是「CSS像素」，這兩個詞後面會講到。

由於這個頁面遊戲上有大量的元素用到絕對定位，若是使用彈性自適應佈局的話，會進行大量的佈局計算，並且還不必定精準。

因此，這裏的解決辦法是經過 discrimina.appVersion 獲取 UA 信息中的關鍵字來判斷不一樣的系統，針對不一樣的系統作不一樣的解決方案，Android 對最外層 div 進行 zoom 縮放，而 iOS 使用 viewport 縮放：

3. 如何 Perfect 的識別平板和手機？

各設備上的佈局問題解決了，可是若是設備屏幕比較大，你的圖片是糊的，怎麼辦？

也許有的同窗會舉手說去檢測 CSS 分辨率，可是這裏就有問題了……有的老舊平板可能屏幕尺寸大，但 CSS 分辨率小；而有的新手機屏幕尺寸不如平板，可是 CSS 分辨率挺高，咋辦？

迴歸現實，咱們分辨平板和手機是以什麼來分辨的？屏幕尺寸，對吧？那麼咱們這裏也一樣，只要想辦法計算出訪問者的屏幕尺寸便可，就是日常咱們說的幾寸屏...幾寸屏的那個尺寸。

怎麼獲取那個尺寸呢？咱們這裏先來學習一些專業術語……

標紅的「屏幕尺寸」是咱們的目標，綠色的元素是咱們後續會用到的東西，其中咱們能夠直接經過 JS 獲取到的只有最後兩項，即「設備像素」和「設備像素比」。

而後咱們來看看「屏幕尺寸」的計算公示：

屏幕尺寸 = 屏幕對角線的CSS像素值/（設備像素比PPI） = (√長²+寬²)/（設備像素比PPI）

屏幕是矩形，矩形對角線的計算公示就是上方右側那個公示；如今咱們來看一下這個公示中用到的元素如何得到……

長和寬：
無直接獲取方式，可是注意看上面的表格，那裏說到「設備像素比 = CSS像素/設備像素」，而「設備像素、設備像素比」咱們是能夠獲取到的，那麼反過來算，「CSS像素 = 設備像素*設備像素比」。

設備像素比：
window.devicePixelRatio

如今，萬事俱備，就差 PPI，這東西雖然沒有直接獲取方式，可是我查了一下資料，仍是獲得了一些數據。

注意，這裏給的是基準值，咱們常說的 iPhone 多少多少 PPI，那個值是用基準值乘以設備像素比得出來的。因爲 Android 手機廠商衆多，並無統一的標準，這裏的 160 只是約等值，因此 Android 屏幕尺寸結果會有偏差，可是基本也夠用了。

如今公式中的全部要素都已經齊備了，具體在代碼中實現，就是下面這樣子：

得出的值，單位是「英寸」，咱們根據這個值就能夠考慮針對平板和手機等不一樣屏幕尺寸作不一樣的事情了，好比最基本的，換一套高清圖……

4. 音頻之殤 (T^T)

這個小遊戲中一共用到3類音頻，共6個音頻，且存在同時播放問題，iOS 下沒問題，可是 Android 下會出現後播放的音頻打斷以前播放音頻的問題。

我測試了一些設備，發現無跡可尋，有的老設備支持，新設備反而不支持。個人解決辦法是 Android 用戶僅播放關鍵音頻，好比這個遊戲當中就是背景音樂，其餘的就不放了。由於沒辦法判斷設備究竟是否支持多音頻同時播放……

//背景音樂（主音頻）
<audio src="http://ossweb-img.qq.com/images/pvz/act/a20140916m_find/bg.mp3" controls="controls"></audio>

//殭屍叫聲（氛圍渲染，共4種叫聲，隨機播放）
<audio src="http://ossweb-img.qq.com/images/pvz/act/a20140916m_find/z2.mp3" controls="controls"></audio>

//觸屏聲音（增長反饋）
<audio src="http://ossweb-img.qq.com/images/pvz/act/a20140916m_find/b.mp3" controls="controls"></audio>

5. 形變+位移+旋轉=？

剛纔講了「活捉兵馬俑」那個遊戲的一些經驗技巧，如今講講幾個 CSS 小屬性搭配起來能夠作的東西。

不能否認，作動畫 Flash 是走在前面的，它的不少表現形式都值得咱們借鑑，好比說這位豌豆射手。

這個豌豆的需求是一個雙屏互動需求，PC 端使用 Flash 實現，移動端沒辦法用 Flash，因此動態效果我就照着臨摹了下來。

具體作法是把豌豆拆成不一樣的小組件，而後再利用 animation、translate、scale、rotate，拼合出一個完整的動態效果，並無多少技術含量，但幾種屬性的搭配使用，讓這顆豌豆看起來仍是挺讚的！

      

等於

(原文此圖片已掛)

因此，不少屬性稍微搭配一下，其實就能夠作出很好玩的東西。哈哈……

這個豌豆射手的小遊戲體驗地址：http://pvz.qq.com/act/a20141120interactive/

6. 其餘一些小細節……

看了這麼久的文章，你可能也累了，下面一些小細節快速過一下……

1) 不要放棄 PC 訪問的用戶，若是沒有很好的引導，他們會直接關閉網頁的。

2) 若是是橫屏無法用的頁面，給予良好的橫屏提示。

3) 爲用戶添加桌面圖標，方便用戶啓動頁面。