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

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

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

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

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

二、交互帮匾、動(dòng)畫

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

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

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

2.組件化的概念讓動(dòng)畫組織得很有條理，即使遇上各種改需求也能針對(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)畫內(nèi)容都鋪在同一條時(shí)間軸上，避免修改了前面的內(nèi)容虏缸，影響了后面的動(dòng)畫甲献。

場(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)畫可以實(shí)現(xiàn)一些H5上比較難實(shí)現(xiàn)的效果，如遮罩效果月匣、從一個(gè)圖形變成另一個(gè)圖形的漸變效果称诗、沿著路徑運(yùn)動(dòng)效果等，使可創(chuàng)作空間得到大大提升撕予。

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

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

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

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

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

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

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

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

4.場(chǎng)景切換時(shí)會(huì)有屏風(fēng)打開和合上，屏風(fēng)上有時(shí)間跳動(dòng)，說明故事的時(shí)間發(fā)展赡鲜。例如從打游戲場(chǎng)景切換到中午約會(huì)吃魚場(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ì)方說得比較快麸粮，自己說得比較慢的方式，表示出對(duì)方想要紅包的著急。

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

四铺浇、填坑

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

五亩进、上線效果

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

1.留存率

從數(shù)據(jù)上可以看出缩歪，用戶對(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萬逛球。

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

六物独、展望

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

小結(jié)

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