一、背景

今年春節(jié)Qzone做的春節(jié)活動(dòng)是讓用戶許三個(gè)新年愿望（發(fā)表空間說說的方式），然后自己去拉好友來(lái)“贊”自己發(fā)的愿望，當(dāng)每一個(gè)愿望積累“贊”的次數(shù)超過5次的時(shí)候就可以點(diǎn)亮龍身體的三分之一，當(dāng)3個(gè)愿望都積累到的時(shí)候就可以全部點(diǎn)亮一條完整的龍，

最終在Qzone個(gè)人中心的Feeds里面可以帶上這條龍：

當(dāng)時(shí)我第一眼看見這條龍的設(shè)計(jì)稿腦中就浮現(xiàn)各種想法：“如果這條龍可以動(dòng)起來(lái)將會(huì)是什么樣子？如果它還會(huì)噴火？如果它可以把前面的名字燒紅？如果它可以把黃鉆的條點(diǎn)亮？如果它可以給大伙拜年？……”

于是萌發(fā)出做一個(gè)彩蛋的念頭……然后就一發(fā)不可收拾了……

二、具體步驟

大前提，為了照顧性能問題，采取的“默認(rèn)顯示龍靜態(tài)圖片，當(dāng)鼠標(biāo)移上圖片的時(shí)候覆蓋一個(gè)龍的噴火flash，當(dāng)鼠標(biāo)移到其他的龍的圖片再動(dòng)態(tài)修改flash坐標(biāo)”這樣的方案來(lái)實(shí)現(xiàn)一個(gè)flash讓所有的靜態(tài)龍都動(dòng)起來(lái)的效果。

1、最開始要做的就是將這張靜態(tài)圖片

大卸八塊，在flash里面做一些拼接、翻轉(zhuǎn)等動(dòng)畫讓它動(dòng)起來(lái)

基本上被我拆分成了：頭、嘴巴、爪子、腰、尾巴等幾個(gè)部件，然后做了動(dòng)畫，播放起來(lái)就像飛著的龍站了起來(lái)：

從

變化到

2、 默認(rèn)情況下是在用戶的名字后面跟著一張圖片，給這個(gè)圖片綁定了mouseover事件，當(dāng)鼠標(biāo)移上這張圖片的時(shí)候觸發(fā)顯示龍噴火的動(dòng)作：

3、當(dāng)鼠標(biāo)移上這個(gè)龍的圖片的時(shí)候，觸發(fā)了顯示事件，這個(gè)時(shí)候?qū)�龍的flash顯示出來(lái)，浮在原來(lái)的龍上面，盡量地微調(diào)坐標(biāo)進(jìn)行對(duì)齊覆蓋：

4、為了可以讓flash完全擋住原來(lái)的圖片，需要將空間的背景色傳到flash里面（因?yàn)榭臻g的背景色可以因用戶裝扮而變）：

5、為了讓體驗(yàn)更加順暢，達(dá)到“鼠標(biāo)移上龍的時(shí)候龍噴火，鼠標(biāo)離開龍的時(shí)候停止”的效果，在龍flash的最頂層放了一個(gè)透明的按鈕，加上事件：鼠標(biāo)移上去的時(shí)候龍播放噴火效果，鼠標(biāo)移除去的時(shí)候隱藏所有可見元素，同時(shí)flash通知js可以過3秒之后將這個(gè)flash從可視范圍內(nèi)移去：

*我這里特別處理了一下，讓透明按鈕的尺寸略小于flash舞臺(tái)的尺寸，是為了解決在兩個(gè)龍直接鼠標(biāo)快速切換會(huì)引發(fā)的bug（后面有講到）

6、為了讓龍噴火的時(shí)候可以將名字燒紅（寓意是紅紅火火），需要將名字傳進(jìn)flash里面，在flash創(chuàng)建一個(gè)textField實(shí)例來(lái)顯示名字，同時(shí)需要有一個(gè)跟空間一樣的背景色擋住原來(lái)的名字

文字格式為“宋體，14號(hào)，右對(duì)齊，紅色”

并給textField的加上發(fā)橙黃的濾鏡，達(dá)到類似被火燒紅的效果，最后控制整個(gè)文字mov的動(dòng)態(tài)顯隱使到被火慢慢燒紅：

7、黃鉆lv8的用戶名稱是一張金黃色的圖片，當(dāng)然要把它也一起燒紅：

由于在顯示flash的時(shí)候這張圖片就已經(jīng)下載完畢了，所以我可以再一次將它加載進(jìn)flash里面，然后做一些紅色調(diào)的調(diào)整：

加了濾鏡就變成

實(shí)際效果如下：

然后再動(dòng)態(tài)控制顯隱它漸顯出來(lái)，疊加了原來(lái)的圖片，看起來(lái)就像是被火慢慢地?zé)�紅。

8、感覺如果可以加一些拜年的文字會(huì)不會(huì)更喜慶一些？而且剛好lv8黃鉆條上面有位置，所以我在上面加了一個(gè)textField，用來(lái)隨機(jī)顯示一些拜年語(yǔ)句和跟龍有關(guān)的文字：

當(dāng)然，為了強(qiáng)調(diào)我要表達(dá)的寓意，進(jìn)空間第一次mouseover到lv8用戶的龍上面都會(huì)出現(xiàn)“龍年吉祥，紅紅火火”這一行字，之后的就隨機(jī)了。

大概有二十幾種不同的文字吧。

9、火焰是找了龍的設(shè)計(jì)師xiaoerhu同學(xué)打黑工特地額外給我畫了幾幀圖片來(lái)做成逐幀動(dòng)畫：

套上去就有噴火的效果了：

10、對(duì)齊問題比較麻煩，因?yàn)辇坒lash是浮在原來(lái)的靜態(tài)圖片上面的，所以對(duì)不同瀏覽器要做絕對(duì)定位的微調(diào)，ie6/ie7/ie8/ie9/safari/firefox/chrome都單獨(dú)處理了一遍……（苦逼的前端開發(fā)）而且對(duì)ie6還要在flash里面對(duì)文字和龍的圖片之間的位置做特殊調(diào)整，特別惡心。

11、名字的背景需要跟進(jìn)名字的的長(zhǎng)度動(dòng)態(tài)調(diào)整，這里我采取的方式是當(dāng)鼠標(biāo)以上靜態(tài)圖片的時(shí)候動(dòng)態(tài)計(jì)算這個(gè)靜態(tài)圖片距離左邊頭像的距離來(lái)判斷這個(gè)寬度應(yīng)該是多少，然后傳給flash去動(dòng)態(tài)調(diào)整背景寬度：

12、由于龍的flash是漂浮在原來(lái)的圖片上面的，如果發(fā)生任何會(huì)讓原來(lái)這條feeds位置發(fā)生變化的事情都會(huì)導(dǎo)致出現(xiàn)兩條龍的窘境，所以在本次做彩蛋的時(shí)候我也地毯式地把能想到的會(huì)導(dǎo)致feeds位置發(fā)生變化的地方加了一個(gè)“IC_FEEDS_POSITION_CHANGE”自定義事件，然后在JS里面監(jiān)聽這個(gè)事件，當(dāng)觸發(fā)這個(gè)事件的時(shí)候重新調(diào)整一下龍flash的位置，避免出現(xiàn)這個(gè)bug。

13、當(dāng)兩條龍之間距離很近的時(shí)候，鼠標(biāo)可以快速在它們之間切換，這個(gè)時(shí)候我發(fā)現(xiàn)需要將觸發(fā)顯隱的按鈕調(diào)整得略小于flash舞臺(tái)的大小，才能保證每次mouseout都會(huì)觸發(fā)，不然會(huì)導(dǎo)致第一條龍顯示在第二個(gè)位置的bug：

所以才特意將這個(gè)觸發(fā)顯隱的按鈕調(diào)小一些。

14、這條龍從誕生到2月2號(hào)噴火的次數(shù)從統(tǒng)計(jì)數(shù)據(jù)顯示日均已經(jīng)達(dá)到千萬(wàn)級(jí)。

三、總結(jié)

這里引用facebook招股書里面提到的一點(diǎn)核心價(jià)值觀—“敢于冒險(xiǎn)”：

敢于冒險(xiǎn)

開發(fā)優(yōu)秀產(chǎn)品意味著承擔(dān)風(fēng)險(xiǎn)。這可能會(huì)很令人擔(dān)憂，使大多數(shù)公司不敢采取勇敢的措施。然而，在一個(gè)變化如此快速的世界里，如果不敢承擔(dān)風(fēng)險(xiǎn)，你就注定會(huì)失敗。我們還有另外一種觀點(diǎn)：“最危險(xiǎn)的事情就是不敢冒險(xiǎn)。”我們鼓勵(lì)所有人勇敢決策，即便這意味著錯(cuò)誤。

因?yàn)楸敬巫鲞@個(gè)彩蛋也是屬于一種新的嘗試，從一張靜態(tài)圖片引發(fā)出靈感再到后面的一步步實(shí)施和調(diào)試會(huì)發(fā)現(xiàn)需要解決的細(xì)節(jié)問題其實(shí)很多，一個(gè)看似很小的東西要把它做好也是需要付出很多的心思和精力，不過整個(gè)過程讓人也很享受，由于很享受很陶醉，整個(gè)過程中我自測(cè)的效率也很高，基本上開發(fā)過程中就覆蓋了98%以上可能遇到的bug，包括2個(gè)龍之間快速切換的極限測(cè)試等等。

最后引用產(chǎn)品同學(xué)的話：

“興趣是最好的工作動(dòng)力”，也希望大家可以把興趣和產(chǎn)品融合，創(chuàng)作出更多有意思的東西。

如果有同學(xué)還沒體驗(yàn)過這條龍的，請(qǐng)趕著這條龍下線前來(lái)我們Qzone里面看一下吧~

作者：xiaoer

文章來(lái)源：騰訊大講堂

標(biāo)簽： Qzone 彩蛋 產(chǎn)品感悟 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。