者按：今天騰訊的同學(xué)從一款HTML5小游戲《植物大戰(zhàn)僵尸》說起，分享一些動畫實(shí)現(xiàn)的知識（動畫可控性、如何兼容不同分辨率、如何識別平板手機(jī)等），附上眾多實(shí)現(xiàn)小技巧，來收 >>>

hello~大家好，我是黑米！ Ｏ(≧▽≦)Ｏ

今天我來跟大家分享一些動畫實(shí)現(xiàn)的相關(guān)知識，希望大家能夠支持（鞠躬……

我很喜歡很喜歡看動畫片，一直有做出好看動畫片的夢想……所以最近做了不少動畫效果來玩兒，也為自己以后可以做出偉大的動畫片打好基礎(chǔ)！

Web端動畫表現(xiàn)有不少辦法，我列一些常見的，然后再說說在實(shí)現(xiàn)上的一些小技巧。

進(jìn)入正題，我要開始認(rèn)真了?。▏?yán)肅臉…… (￣ー￣〃)

嗯……首先大家先來跟我一起玩?zhèn)€游戲，請快速的掏出手機(jī)，打開微信，“掃一掃”下面的二維碼，通關(guān)最多的前三名同學(xué)……什么獎品都沒有??！

相信大家都認(rèn)真的玩兒了游戲吧？我們這里有一位萬技師一直玩到50多關(guān)，最后體力透支，主動“自殺”，否則相信他能玩出過百關(guān)，怎么做到的？有彩蛋，不知道你有沒有發(fā)現(xiàn)，哈哈……

嗯……回歸正題，這個(gè)小游戲當(dāng)中用到了大量的動畫效果，主要是逐幀動畫，今天的第一部分，就先來講講動畫這個(gè)事情。

我先來列一排動畫效果給大家看……

圖1

圖2

圖3

剛才上面列的動畫效果分別是 GIF 動畫、Canvas + CSS 動畫、逐幀動畫。其實(shí)說起常見的動畫實(shí)現(xiàn)，除了 GIF（APNG）、Flash 和 Canvas 外，其他基本都是 CSS 動畫，即使是通過 JS 實(shí)現(xiàn)，大部分情況下只是通過 JS 來修改 CSS 屬性而已。

而 GIF 動畫僅支持 8 位色，顏色偏少，雖然 APNG 解決了這個(gè)問題，但是存在兼容問題，同時(shí)它和 GIF 一樣，沒有可控性，所以它們一般很少用于動畫制作流程中，僅用來展示。相對來說 CSS 動畫和 Canvas 動畫的可控性更易于制作頁面效果動畫以及頁面游戲。

一、可控性

剛才說了“可控性”，那到底什么是可控性？我們先來看一個(gè)動畫效果的大概示意圖！

一段動畫一般由“開始 – 過渡 – 結(jié)束”來組成，GIF 動畫是無法通過代碼來獲取到這些狀態(tài)的，但 CSS 動畫可以！

我這里的做法是把每一組圖片合成一張“雪碧圖”，然后利用 CSS 的 animation 做逐幀動畫，寫好函數(shù)通過不同的參數(shù)來調(diào)用不同的角色。

Role（dirt）

Role（rises）

Role（cast）

Role（broken）

Role（death）

合成“雪碧圖”的逐幀動畫

像上面 圖2 和 圖3 的例子，都是由好幾個(gè)動畫銜接完成，那么它們之間如何銜接呢？有的同學(xué)可能會說用setTimeout/setInterval/requestAnimationFrame 一類的延遲功能來做銜接，但是這樣會有個(gè)問題就是在性能不同的機(jī)器上，會有誤差，而且維護(hù)繁瑣。所以，我們需要一個(gè)觸發(fā)形式的銜接方式，即上一個(gè)動畫完成了，通知下一個(gè)動畫開始。

CSS 動畫實(shí)現(xiàn)一般使用 animation 和 transition 來搭配其他屬性使元素產(chǎn)生不同變化，從而達(dá)到動畫效果。

而這兩個(gè)屬性是可以通過 JS 中的事件來監(jiān)聽到“開始”和“結(jié)束”狀態(tài)。具體事件如下：

animationstart：

• animationstart 事件在 CSS animation 開始時(shí)被觸發(fā)。如果有 animation-delay ，事件將在延遲時(shí)效過期之后立即觸發(fā)。 如果延遲時(shí)效是負(fù)值，事件觸發(fā)時(shí)將帶有等于延遲時(shí)效絕對值的 elapsedTime 。

animationend：

• animationstart 事件在 CSS animation 完成時(shí)被觸發(fā)。

transionstart：

• transionstart 事件在 CSS transition 過渡開始時(shí)被觸發(fā)。

transitionend：

• transitionend 事件會在 CSS transition 結(jié)束后觸發(fā)。當(dāng) transition 完成前移除 transition 時(shí)，比如移除 CSS 的 transition-property 屬性，事件將不會被觸發(fā)。

這些事件在不同瀏覽器下需要加前綴什么的大家應(yīng)該都懂得，至于 transionstart，目前僅在 IE10+ 上有效……

通過事件監(jiān)聽的方式銜接，并利用分層的形式疊加多重動畫，最終實(shí)現(xiàn)效果：

現(xiàn)在，開始狀態(tài)和結(jié)束狀態(tài)獲取到了，那中間的過渡狀態(tài)要怎么辦呢？比如說我要動畫執(zhí)行到 30% 的時(shí)候，執(zhí)行一個(gè)回調(diào)，親一口姐姐，腫么辦？?(?ε??)

雖然沒有直接的事件可以監(jiān)聽到過渡狀態(tài)，而且這個(gè)需求中也暫時(shí)用不到這個(gè)過渡狀態(tài)監(jiān)聽，但是我們也可以稍微做點(diǎn)事情的。（不拋棄，不放棄?。?/p>

怎么做呢？比如一個(gè)動畫的執(zhí)行時(shí)間是10s，那么在動畫開始的時(shí)候，跑一個(gè) setInterval 來不斷的記錄過渡狀態(tài)，然后用當(dāng)前跑到的值和總時(shí)長就能算出具體的進(jìn)度了。這里要稍微注意一下，因?yàn)閯赢嫴シ趴刂疲╝nimation-play-state）屬性的存在，在暫停和重新播放時(shí)，需要對計(jì)時(shí)器稍微進(jìn)行一下處理，否則得出的進(jìn)度值會有錯誤。

這不是一個(gè)很完美的辦法，因?yàn)樵诓煌男阅芟拢?jì)時(shí)器的值可能會有微弱誤差，但如果你要求并不是很精確，還是可以嘗試這個(gè)辦法的。

二、如何 Perfect 的兼容各分辨率？

兼容各式屏幕一般有這樣的辦法：

還有這樣的辦法：

最后，還有傳說中的彈性自適應(yīng)布局：∑(O_O；)

但是，在這個(gè)需求上，統(tǒng)統(tǒng)不適用！為什么？

viewport 和 media Query 在 iOS 和 Android 上識別的單位不同，在 iOS 上識別的是“設(shè)備像素”，而在 Android 上識別的是“CSS像素”，這兩個(gè)詞后面會講到。

因?yàn)檫@個(gè)頁面游戲上有大量的元素用到絕對定位，如果使用彈性自適應(yīng)布局的話，會進(jìn)行大量的布局計(jì)算，而且還不一定精準(zhǔn)。

所以，這里的解決辦法是通過 discrimina.appVersion 獲取 UA 信息中的關(guān)鍵字來判斷不同的系統(tǒng)，針對不同的系統(tǒng)做不同的解決方案，Android 對最外層 div 進(jìn)行 zoom 縮放，而 iOS 使用 viewport 縮放：

三、如何 Perfect 的識別平板和手機(jī)？

各設(shè)備上的布局問題解決了，但是如果設(shè)備屏幕比較大，你的圖片是糊的，怎么辦？

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

回歸現(xiàn)實(shí)，我們分辨平板和手機(jī)是以什么來分辨的？屏幕尺寸，對吧？那么我們這里也同樣，只要想辦法計(jì)算出訪問者的屏幕尺寸即可，就是平常我們說的幾寸屏…幾寸屏的那個(gè)尺寸。

怎么獲取那個(gè)尺寸呢？我們這里先來學(xué)習(xí)一些專業(yè)術(shù)語……

標(biāo)紅的“屏幕尺寸”是我們的目標(biāo)，綠色的元素是我們后續(xù)會用到的東西，其中我們可以直接通過 JS 獲取到的只有最后兩項(xiàng)，即“設(shè)備像素”和“設(shè)備像素比”。

然后我們來看看“屏幕尺寸”的計(jì)算公示：

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

屏幕是矩形，矩形對角線的計(jì)算公示就是上方右側(cè)那個(gè)公示；現(xiàn)在我們來看一下這個(gè)公示中用到的元素如何獲得……

現(xiàn)在，萬事俱備，就差 PPI，這東西雖然沒有直接獲取方式，但是我查了一下資料，還是得到了一些數(shù)據(jù)。

注意，這里給的是基準(zhǔn)值，我們常說的 iPhone 多少多少 PPI，那個(gè)值是用基準(zhǔn)值乘以設(shè)備像素比得出來的。由于 Android 手機(jī)廠商眾多，并沒有統(tǒng)一的標(biāo)準(zhǔn)，這里的 160 只是約等值，所以 Android 屏幕尺寸結(jié)果會有誤差，但是基本也夠用了。

現(xiàn)在公式中的所有要素都已經(jīng)齊備了，具體在代碼中實(shí)現(xiàn)，就是下面這樣子：

得出的值，單位是“英寸”，我們根據(jù)這個(gè)值就可以考慮針對平板和手機(jī)等不同屏幕尺寸做不同的事情了，比如最基本的，換一套高清圖……

四、音頻之殤 (T^T)

這個(gè)小游戲中一共用到3類音頻，共6個(gè)音頻，且存在同時(shí)播放問題，iOS 下沒問題，但是 Android 下會出現(xiàn)后播放的音頻打斷之前播放音頻的問題。

我測試了一些設(shè)備，發(fā)現(xiàn)無跡可尋，有的老設(shè)備支持，新設(shè)備反而不支持。我的解決辦法是 Android 用戶僅播放關(guān)鍵音頻，比如這個(gè)游戲當(dāng)中就是背景音樂，其他的就不放了。因?yàn)闆]辦法判斷設(shè)備到底是否支持多音頻同時(shí)播放……

五、形變+位移+旋轉(zhuǎn)=？

剛才講了“活捉兵馬俑”那個(gè)游戲的一些經(jīng)驗(yàn)技巧，現(xiàn)在講講幾個(gè) CSS 小屬性搭配起來可以做的東西。

不可否認(rèn)，做動畫 Flash 是走在前面的，它的很多表現(xiàn)形式都值得我們借鑒，比如說這位豌豆射手。

這個(gè)豌豆的需求是一個(gè)雙屏互動需求，PC 端使用 Flash 實(shí)現(xiàn)，移動端沒辦法用 Flash，所以動態(tài)效果我就照著臨摹了下來。

具體做法是把豌豆拆成不同的小組件，然后再利用 animation、translate、scale、rotate，拼合出一個(gè)完整的動態(tài)效果，并沒有多少技術(shù)含量，但幾種屬性的搭配使用，讓這顆豌豆看起來還是挺贊的！

等于

所以，很多屬性稍微搭配一下，其實(shí)就可以做出很好玩的東西。哈哈……

六、其他一些小細(xì)節(jié)……

看了這么久的文章，你可能也累了，下面一些小細(xì)節(jié)快速過一下……

1）不要放棄 PC 訪問的用戶，如果沒有很好的引導(dǎo)，他們會直接關(guān)閉網(wǎng)頁的。

2）如果是橫屏沒法用的頁面，給予良好的橫屏提示。

3）為用戶添加桌面圖標(biāo)，方便用戶啟動頁面。

好的，今天的分享基本就這樣告一段落，欲知后事兒如何，請聽下回分解！

原文地址：tgideas

優(yōu)秀網(wǎng)頁設(shè)計(jì)公眾微信號：youshege碎片時(shí)間學(xué)習(xí)利器！

一個(gè)做微信運(yùn)營的小伙伴都有這樣的煩惱，老板要求做活動增粉，又不舍得砸錢，拿著吸引度一般的獎品，糾結(jié)每個(gè)月怎么變著花樣撩粉絲。傳統(tǒng)的轉(zhuǎn)發(fā)集贊如今又有被封號的風(fēng)險(xiǎn)，評論區(qū)評論點(diǎn)贊，大家擔(dān)心多一個(gè)人知道就多一個(gè)競爭者，活動根本推廣不出去，做H5小游戲定制費(fèi)用上萬，只能依賴免費(fèi)平臺，因?yàn)槿藬?shù)限制，最后一場活動下來引來的粉絲只是兩位數(shù)。。。傷心地打開朋友圈，人家的H5游戲又刷爆啦！

在做微信H5小游戲之前，我們先要知道哪些游戲是能有效吸粉的。

1、以營銷為主要目的的游戲，簡單易上手是必須的，不然大媽怎么為你瘋狂？但也不能極端地上來就甩紅包，點(diǎn)開就沒了，這樣沒有可玩性。

2、H5游戲不過多占用用戶時(shí)間。微信用戶一般沒有在朋友圈給一個(gè)游戲預(yù)留很長時(shí)間，不然要APP干嘛呢。游戲步驟太復(fù)雜，用戶會失去耐心。

3、H5游戲機(jī)會要多，滿足用戶“這次不行，再來一次”的心理，不知不覺中讓用戶“停不下來”。最后來個(gè)誘導(dǎo)分享，比如“我在XX游戲中獲得了XX分，你敢挑戰(zhàn)一下嗎”之類的，炫耀什么的用戶最喜歡了。

了解H5小游戲的套路后，在不懂程序代碼的前提下，要做HTML5小游戲，除了找專門的游戲平臺，其實(shí)還可以選擇一些自主建站工具。目前市面上一些建站工具已經(jīng)率先開發(fā)了營銷功能，像建站寶盒推出的易企玩小游戲。

易企玩是建站寶盒新推出的一系列免費(fèi)H5互動小游戲，由專業(yè)團(tuán)隊(duì)根據(jù)市場專門研發(fā)，集趣味性、耐玩性、互動性、分享性于一體，傳播力度打，能滿足企業(yè)多種商業(yè)營銷行為。

目前易企玩小游戲共推出四款，包括《數(shù)錢大戰(zhàn)》、《寵物對對碰》、《我要萌妹子》、《抓住大白》。用戶只需選擇任意一款，按照寶盒提示對游戲參數(shù)進(jìn)行設(shè)置，人數(shù)完全不受限制，沒有額外花費(fèi)，還可選擇在游戲元素中植入品牌！設(shè)置完成后保存，在活動后臺掃描二維碼就能進(jìn)入游戲，開啟趣味的營銷旅程。在手機(jī)游戲頁面上復(fù)制鏈接，就能直接鏈到微信公眾號，全程不涉及程序代碼的問題！

雖然一些專門的微信游戲平臺的游戲很多，但是能廣泛傳播的也就那幾種，價(jià)格嘛，用過的人都懂的。而上面這些HTML5游戲，都是在購買建站寶盒的時(shí)候贈送的，不用再額外花錢購買。一套建站寶盒全網(wǎng)營銷解決方案才2010元/年，從平臺搭建到營銷推廣，一步到位，告別第三方平臺依賴。傻瓜式操作，馬上開啟你的吸粉之路！免費(fèi)試用：http://www.iisp.com/design/game.php

更多建站&互聯(lián)網(wǎng)行業(yè)資訊，請關(guān)注微信公眾號：耐思尼克（iisp-com）