還記得幾天前的520你在干什么嗎？是在朋友圈爭(zhēng)先恐后曬恩愛(ài)、曬求婚、曬結(jié)婚證結(jié)婚照，還是一邊吃著狗糧一邊被曬得雙目失明呢？我們單身狗團(tuán)隊(duì)在這一天特意奉上《520的正確操作方式：白和寶貝橘的520》H5，幫助各位用最正確的姿勢(shì)過(guò)一個(gè)幸福的520。

首先奉上H5線上地址，看看白和寶貝橘兩只貓是怎么過(guò)這一天的：

接下來(lái)，我和大家分享一下在這次實(shí)現(xiàn)這支H5中的一些心得體會(huì)。

一、創(chuàng)意和策劃

H5主要講述白和寶貝橘兩只貓?jiān)?20這一天的三個(gè)情景故事：玩王者榮耀拿下四殺時(shí)也要接聽(tīng)另一半的電話、有好吃的東西要主動(dòng)讓給另一半吃、最好的情人節(jié)禮物就是給對(duì)方發(fā)個(gè)充滿感情的QQ紅包。從這些情景中提醒情侶們正確的520操作方式就是要懂得要替另一半著想、給對(duì)方驚喜。最后可在落地頁(yè)給心愛(ài)的Ta發(fā)紅包、領(lǐng)取厘米秀裝飾和動(dòng)作表情秀恩愛(ài)。故事從貓的角度去敘述，顯得更生動(dòng)形象有趣，而在每個(gè)關(guān)鍵時(shí)刻給予用戶(hù)操作選擇，使用戶(hù)更具代入感，以及對(duì)正確的操作方式這一主題印象更加深刻。

二、交互、動(dòng)畫(huà)

這個(gè)H5以故事動(dòng)畫(huà)的形式演繹，那怎么去做好這個(gè)動(dòng)畫(huà)就是最核心的問(wèn)題之一了。在此我想到了三個(gè)方案：純H5+CSS3、視頻、animate cc+createjs。用H5+CSS3純代碼實(shí)現(xiàn)的方式不夠直觀、編寫(xiě)復(fù)雜、比較抽象、不適合用于制作這個(gè)內(nèi)容豐富、時(shí)間長(zhǎng)的動(dòng)畫(huà)；視頻體積較大，用戶(hù)習(xí)慣在有wifi的情況下才會(huì)打開(kāi)，不便于傳播，且無(wú)法在播放過(guò)程中提供交互操作（如在各場(chǎng)景結(jié)尾都會(huì)讓用戶(hù)操作如何應(yīng)對(duì)各種難題），所以也不合適；而animate cc+createjs則很好地解決了以上方案的各種弊端：可以可視化直觀地制作動(dòng)畫(huà)，體積比視頻小很多，可以實(shí)現(xiàn)各種交互操作、邏輯處理，比較契合這次動(dòng)畫(huà)的需求，因此也自然而然使用這個(gè)方案了。

實(shí)際上，animate cc+createjs的實(shí)現(xiàn)動(dòng)畫(huà)的方式有很多好處，在此簡(jiǎn)單列舉一下：

1.可視化實(shí)現(xiàn)，制作時(shí)可以很直觀地看到效果。

2.組件化的概念讓動(dòng)畫(huà)組織得很有條理，即使遇上各種改需求也能針對(duì)目標(biāo)組件修改，避免牽一發(fā)而動(dòng)全身的情況。這個(gè)可以結(jié)合面向?qū)ο蟮木幊趟枷肴ダ斫狻Ｈ缦聢D將3個(gè)場(chǎng)景都轉(zhuǎn)成組件組織，可以很好地解耦管理每個(gè)場(chǎng)景的內(nèi)容，而不是將場(chǎng)景動(dòng)畫(huà)內(nèi)容都鋪在同一條時(shí)間軸上，避免修改了前面的內(nèi)容，影響了后面的動(dòng)畫(huà)。

場(chǎng)景內(nèi)可以繼續(xù)分解成各個(gè)動(dòng)作部分，將其組件化以進(jìn)一步解耦，方便組織和管理，替換素材時(shí)也能夠盡量減少修改點(diǎn)。例如將玩游戲時(shí)手上下晃動(dòng)的動(dòng)作組裝成一個(gè)不停循環(huán)的組件放在主場(chǎng)景下，當(dāng)主場(chǎng)景中有其他修改，時(shí)間軸發(fā)生變化，也不會(huì)影響到這個(gè)手晃動(dòng)效果的展示。

3.animate cc制作動(dòng)畫(huà)可以實(shí)現(xiàn)一些H5上比較難實(shí)現(xiàn)的效果，如遮罩效果、從一個(gè)圖形變成另一個(gè)圖形的漸變效果、沿著路徑運(yùn)動(dòng)效果等，使可創(chuàng)作空間得到大大提升。

4.createjs提供了豐富的方法來(lái)和動(dòng)畫(huà)進(jìn)行交互，開(kāi)發(fā)者用熟悉的js就能編寫(xiě)邏輯，相比animate cc需要使用action script來(lái)處理邏輯，學(xué)習(xí)成本進(jìn)一步下降，上手更容易。

接著簡(jiǎn)單介紹一下如何用animate cc實(shí)現(xiàn)H5中常見(jiàn)的位移變換、大小變換、旋轉(zhuǎn)變換。

由動(dòng)圖可見(jiàn)這些效果是很容易實(shí)現(xiàn)的，而且制作效率比編碼高得多了。

三、小細(xì)節(jié)

制作效率高了，就有更多的時(shí)間打磨細(xì)節(jié)了。雖然開(kāi)發(fā)時(shí)間還是很緊張，但我們還是努力在細(xì)節(jié)上把動(dòng)畫(huà)做得更自然生動(dòng)。在這抽出幾點(diǎn)細(xì)節(jié)簡(jiǎn)單介紹一下：

1.loading頁(yè)開(kāi)始時(shí)兩只貓相繼探出頭來(lái)，白貓看到黑貓出現(xiàn)時(shí)會(huì)轉(zhuǎn)動(dòng)眼睛偷瞄一下他。原方案他們會(huì)捉迷藏，白貓會(huì)去到黑貓的位置，然后瞄到黑貓又跑去其他地方了，如此循環(huán)。后來(lái)又想到用貓爪拉開(kāi)門(mén)的方式表現(xiàn)加載進(jìn)度，就將2個(gè)創(chuàng)意結(jié)合在一起了。

2.在玩游戲時(shí)，隨著拿下三殺四殺，手的動(dòng)作會(huì)變得越來(lái)越大，屏幕的發(fā)射光也越來(lái)越頻密，以表現(xiàn)出玩游戲時(shí)的激動(dòng)，以及為后面另一半突然來(lái)電話不知所措做出較強(qiáng)烈的反差效果。

3.用戶(hù)操作貓爪進(jìn)行選擇時(shí)，既可以拖動(dòng)貓爪，又可以點(diǎn)擊目標(biāo)位置完成選擇。對(duì)于給魚(yú)的場(chǎng)景，貓爪左邊大量的空白位置也能拖動(dòng)貓爪，方便各種操作習(xí)慣的用戶(hù)。當(dāng)用戶(hù)沒(méi)操作的時(shí)候，會(huì)顯示提示箭頭指引用戶(hù)操作。

4.場(chǎng)景切換時(shí)會(huì)有屏風(fēng)打開(kāi)和合上，屏風(fēng)上有時(shí)間跳動(dòng)，說(shuō)明故事的時(shí)間發(fā)展。例如從打游戲場(chǎng)景切換到中午約會(huì)吃魚(yú)場(chǎng)景時(shí)，時(shí)間從11：00跳到12：30，表示時(shí)間的流逝，使故事更具連貫性。

5.在用QQ聊天的場(chǎng)景中，模仿了真實(shí)QQ聊天時(shí)對(duì)話氣泡及其從外往內(nèi)進(jìn)場(chǎng)的方式，增強(qiáng)真實(shí)感和代入感，聊天內(nèi)容也弄成對(duì)方說(shuō)得比較快，自己說(shuō)得比較慢的方式，表示出對(duì)方想要紅包的著急。

6.當(dāng)有音效發(fā)出時(shí)，背景音樂(lè)音量會(huì)適度降低，待音效結(jié)束時(shí)再恢復(fù)到原來(lái)的音量，模擬真實(shí)的手機(jī)聲音效果。
7.當(dāng)用戶(hù)做出不好的選擇時(shí)，原本的創(chuàng)意是回放一下兩只貓過(guò)去的恩愛(ài)回憶，然后再做出好的選擇。在評(píng)審時(shí)覺(jué)得這讓H5有點(diǎn)拖沓了，于是把回憶刪去，改為很直觀的”想做單身狗嗎？還是對(duì)他好吧“之類(lèi)的提示，另外也加快看起來(lái)比較拖沓的動(dòng)效，使得最終H5看起來(lái)更加緊湊和節(jié)奏感。

四、填坑

在開(kāi)發(fā)的過(guò)程中，我們踩了不少坑，耽誤了一些時(shí)間，也發(fā)現(xiàn)了一些好的工作方式以提高效率。在此列一下，方便大家繞坑：
1.由于動(dòng)畫(huà)素材較多，素材最好分門(mén)別類(lèi)用不同的目錄組織好，減少查找素材的時(shí)間，替換素材時(shí)也更加輕松容易。同理，設(shè)計(jì)稿psd也應(yīng)該將不同的素材放好在不同的組中，方便重構(gòu)切圖。素材在動(dòng)畫(huà)中也最好轉(zhuǎn)換成元件，方便素材的替換和管理。
2.將createjs.Ticker.timingMode設(shè)為createjs.Ticker.RAF。用默認(rèn)的RAF_SYNCHED會(huì)按照在animate cc里設(shè)置的fps播放動(dòng)畫(huà)，這在性能不高的安卓機(jī)上會(huì)卡。而設(shè)置為createjs.Ticker.RAF后，會(huì)改用requestAnimationFrame來(lái)播放動(dòng)畫(huà)，在安卓機(jī)上也能流暢播放。這樣做的壞處是幀率會(huì)不確定，完全以requestAnimationFrame的處理速度來(lái)決定播放速度。解決辦法是制作動(dòng)畫(huà)時(shí)將fps設(shè)成60fps，這樣和requestAnimationFrame處理的幀率大致相近，即可按自己想要的速度去制作動(dòng)畫(huà)。
3.聲音不要放在createjs提供的預(yù)加載方法上。因?yàn)闆](méi)有緩存，聲音文件預(yù)加載會(huì)嚴(yán)重拖慢loading的速度。后來(lái)我們將音樂(lè)文件直接通過(guò)new audio加載，并將主BGM體積控制在500K以?xún)?nèi)，將聲效控制在幾十K內(nèi)，經(jīng)處理后，主BGM能快速播放，聲效也能及時(shí)響應(yīng)動(dòng)畫(huà)發(fā)出。用audio的另一個(gè)好處，是能夠用多個(gè)audio在手機(jī)上同時(shí)播多個(gè)聲音，而用createjs的方法在iphone中只能同時(shí)播一個(gè)聲音，因此在聲音處理方面建議使用audio。此外還需要記錄聲音在各個(gè)時(shí)刻的播放狀態(tài)，以免在靜音后重新打開(kāi)聲音時(shí)不知道該播什么。
4.jpg圖片在qq域名里會(huì)自動(dòng)將mine-type轉(zhuǎn)為webp，導(dǎo)致在iphone上不能正常顯示圖片，將其放在http://i.gtimg.cn/ 域名下就能正常顯示圖片了。這個(gè)問(wèn)題也向相關(guān)人員反饋了。

五、上線效果

接著，我們看看這個(gè)H5上線后的幾個(gè)統(tǒng)計(jì)數(shù)據(jù)吧

1.留存率

從數(shù)據(jù)上可以看出，用戶(hù)對(duì)這個(gè)H5是比較感興趣的，大部分人看完第一個(gè)場(chǎng)景后會(huì)繼續(xù)把第二和第三個(gè)場(chǎng)景看完。

2.點(diǎn)發(fā)紅包轉(zhuǎn)化率42.2%，同比上一年22.7%轉(zhuǎn)化率，提升86%。分享次數(shù)達(dá)到100萬(wàn)。

此外，該H5也被“H5案例分享”網(wǎng)站收錄，助力宣傳QQ錢(qián)包和厘米秀。在朋友圈、空間也看到很多朋友轉(zhuǎn)發(fā)，很多愛(ài)貓人士也表示這2只貓很萌很可愛(ài)。

六、展望

由于這次開(kāi)發(fā)時(shí)間比較緊張，有一些展望和創(chuàng)意沒(méi)來(lái)得及嘗試，將來(lái)如有類(lèi)似的機(jī)會(huì)會(huì)繼續(xù)嘗試：
1.手機(jī)來(lái)電時(shí)可加上震動(dòng)手機(jī)效果
2.給游戲添加雙屏互動(dòng)，情侶雙方一起玩，到最后可以查看對(duì)方在游戲中做出的選擇
3.骨骼動(dòng)畫(huà)的應(yīng)用，用在貓手的動(dòng)作上。
4.雖然這是QQ的活動(dòng)，但可以討探一下如果在微信上打開(kāi)，可不可以讓整個(gè)動(dòng)畫(huà)都在微信上播放，到了發(fā)QQ紅包和領(lǐng)厘米秀裝飾時(shí)再跳到QQ上進(jìn)行。這樣在微信上的傳播范圍應(yīng)該會(huì)更廣。

小結(jié)

經(jīng)過(guò)這次H5活動(dòng)，我們可以看到使用animate cc+createjs的方式能夠高效可視化地進(jìn)行動(dòng)畫(huà)的制作。生動(dòng)有趣的故事內(nèi)容能吸引用戶(hù)一直體驗(yàn)下去，更愿意使用目標(biāo)功能，提高轉(zhuǎn)化率，而細(xì)節(jié)的打磨能使動(dòng)畫(huà)更加自然生動(dòng)。在此感謝設(shè)計(jì)師joerysheng、產(chǎn)品artisttong、lornali、開(kāi)發(fā)kavink、測(cè)試v_hswhu奮斗多天的辛勞，也感謝sunnychu、jundabei、freywang、rustyma、cherylli、doraliao、ternenceyu、v_jjinshi等大神給予寶貴的意見(jiàn)。另祝愿所有看到這兒還沒(méi)關(guān)閉頁(yè)面的用心讀者，未拍拖的早日遇到心儀的另一半過(guò)上幸福的情人節(jié)，已拍拖的能趕上過(guò)今年的父親節(jié)。大家也可以在評(píng)論區(qū)留言搭訕，說(shuō)不定緣分就這樣來(lái)了，friends嚟噶嘛！