一、背景

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

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

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

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

二、具體步驟

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

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

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

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

從

變化到

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

3、當鼠標移上這個龍的圖片的時候，觸發(fā)了顯示事件，這個時候?qū)�龍的flash顯示出來，浮在原來的龍上面，盡量地微調(diào)坐標進行對齊覆蓋：

4、為了可以讓flash完全擋住原來的圖片，需要將空間的背景色傳到flash里面（因為空間的背景色可以因用戶裝扮而變）：

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

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

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

文字格式為“宋體，14號，右對齊，紅色”

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

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

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

加了濾鏡就變成

實際效果如下：

然后再動態(tài)控制顯隱它漸顯出來，疊加了原來的圖片，看起來就像是被火慢慢地燒紅。

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

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

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

9、火焰是找了龍的設(shè)計師xiaoerhu同學打黑工特地額外給我畫了幾幀圖片來做成逐幀動畫：

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

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

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

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

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

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

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

三、總結(jié)

這里引用facebook招股書里面提到的一點核心價值觀—“敢于冒險”：

敢于冒險

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

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

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

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

如果有同學還沒體驗過這條龍的，請趕著這條龍下線前來我們Qzone里面看一下吧~

作者：xiaoer

文章來源：騰訊大講堂

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

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