背景

(相關(guān)資料圖)

年末將至，各直播平臺都會上線了相應(yīng)的年末活動，各公會、主播也都紛紛參加活動沖年終業(yè)績，而BigoLive作為YY旗下的海外直播平臺當(dāng)然也不落下步伐，相比與國內(nèi)已經(jīng)成規(guī)模的直播帶貨，海外發(fā)展形式則更為偏向于傳統(tǒng)直播的“秀場”，所以我們的年末活動也都圍繞這直播打賞模式做活動，并將各個用戶/主播福利點滿，爭取早日業(yè)績達(dá)標(biāo)；為了完成這一目標(biāo)，早在9月1號便密鑼緊鼓地開發(fā)年度盛典的首個活動——區(qū)域家族賽，緊接其后的還有區(qū)域個人賽、全球家族賽、全球個人賽，BigoLive前端營收組從9月至11月陸續(xù)地投入大量人力參與開發(fā)年度盛典，其最終效果也同比上年度更佳。

活動流程與概況

活動主要分為預(yù)賽，晉級賽，半決賽與決賽四個階段。參與的用戶包含了家族，主播，用戶，針對不同的人群設(shè)置不同的競賽晉升機(jī)制，由于每類人群的利益都是息息相關(guān)的，所以在活動玩法上給每類人群足夠有吸引力的獎勵機(jī)制，讓大家形成一個作戰(zhàn)團(tuán)體，家族靠主播獲得票，主播靠家族協(xié)助運營粉絲獲得更多打賞，主播通過粉絲打賞獲得高排名，粉絲通過打賞獲得榮譽稱號。從整體的活動設(shè)計上來看，邏輯還是較為清晰的，模塊劃分也合理，包含各賽程，榜單，活動規(guī)則，家族獎勵，個人獎勵，額外的還有相關(guān)活動的賽況介紹，包含打得火熱的直播間，官方最新戰(zhàn)況報道，粉絲精華帖子推薦等等，讓用戶看到了一個更加真實，更有感情更有溫度的比賽。每個賽段的活動是一環(huán)扣一環(huán)的，家族賽得到的復(fù)活卡可以在個人賽使用，區(qū)域家族賽打榜的前N名（各區(qū)域設(shè)置不同）能夠得到參與全球賽的資格等；在原型與UI的設(shè)計上，產(chǎn)品和設(shè)計師、技術(shù)都達(dá)成了共識：后一個活動在前一個活動的基礎(chǔ)上做改動，這樣能夠在保持UI風(fēng)格不變的情況下，更利于前端做模塊/組件的分割；另外在人員排期上也是安排了雙線同時并進(jìn)，更大程度的提前提測日期，以便上線前進(jìn)行充分的測試。

前端技術(shù)設(shè)計

年度盛典可謂是把整個直播體系的功能都用上了一遍，從送禮打榜、貴族升級到bigo寵物養(yǎng)成、貼吧分享等等形成了一條引導(dǎo)用戶操作的鏈路；展示模塊上也是用上了直播間內(nèi)web元素的活動面板、輪播入口、暴獎彈窗、半屏頁拉起等功能，那么這篇文章我們會講述年度盛典的整體設(shè)計以及使用到的公共模塊。

1.活動主頁

從UI圖可以看出，UI對組件的劃分也是與技術(shù)的想法是比較一致的。能從UI上每個模塊之間都能進(jìn)行解耦，封裝出榜單、彈窗、賽程信息、直播間跳轉(zhuǎn)鏈接、廣告輪播等大量可復(fù)用的交互展示組件。此外，數(shù)據(jù)上也可以通過vuex進(jìn)行狀態(tài)管理，代碼設(shè)計時就像搭積木一樣對每個賽程階段都構(gòu)建一個組裝界面，每個界面內(nèi)是不同組件的組合，這樣用戶在切換不同階段數(shù)據(jù)的時候只是更新 store的狀態(tài)即可，所以keep-alive+component就形成一個很好的配合；

六邊形頭像

按照客戶端的規(guī)范，家族頭像是以六邊形的形式展示的，使用web來展示六邊形，我們準(zhǔn)備的3種方案：

如果背景色固定，可以在正常頭像上層遮蓋一個挖空六邊形的模板，但實際UI中背景顏色過多，遂放棄該方案；

使用clip-path描繪各個頂點，使用方便，缺點為兼容性不夠全面；

由于要兼容4.3和ios9機(jī)型，所以不使用css3的語法，構(gòu)思是使用多個變形的矩形進(jìn)行疊加，運用overflow: hidden;進(jìn)行邊界的描繪;

.hexagon-container {    width: 100%;    height: 100%;    overflow: hidden;    visibility: hidden;    position: absolute;    left: 50%;    top: 50%;    transform: translate3d(-50%, -50%, 0) rotate(120deg);    .hexagon-container-in1 {      overflow: hidden;      width: 100%;      height: 100%;      transform: rotate(-60deg);      .hexagon-container-in2 {        width: 100%;        height: 100%;        visibility: visible;        transform: rotate(-60deg);        background: center no-repeat;        background-size: cover;      }    }  }

最終效果：

2.活動面板

活動面板是懸浮在直播間左上角（多人房為右下角）的一塊180px*250px的webview，相信大家在其他直播軟件也能看到其存在，差異就在于是客戶端實現(xiàn)還是web實現(xiàn)；年度盛典作為需要強曝光的活動，所以活動面板也是需要配置開發(fā)的，實時性的數(shù)據(jù)更新是面板展示數(shù)據(jù)的關(guān)鍵，主播和觀眾的每一次操作都能反映在面板中，提高觀眾們的積極性，增加主播間的競爭性。 活動模板整體設(shè)計如下：

2.1 相關(guān)交互

活動面板是主播間主要的活動入口，所以產(chǎn)品會以面板為出發(fā)點規(guī)劃用戶的整體操作路徑，點擊面板主體部分可拉起禮物面板并定位到相關(guān)活動配置的禮物位置，點擊頂部可通過內(nèi)部jsbridge協(xié)議打開半屏頁展示活動主頁，另外直播間還有爆獎和提示彈窗，都可通過在面板監(jiān)聽數(shù)據(jù)更新，調(diào)用不同接口展示相應(yīng)的頁面，彈窗之間有隊列進(jìn)行管控，避免多個彈窗同時觸發(fā)導(dǎo)致數(shù)據(jù)丟失。

3.獎勵展示

獎勵展示頁面可以說是主播和用戶們最為關(guān)注的一個頁面了，不同區(qū)域會根據(jù)用戶消費能力進(jìn)行區(qū)域化配置獎勵展示來增強活動與用戶的匹配性，提升用戶消費，拉動營收。

以上只是一個區(qū)域的一個分組賽程的獎勵展示，Bigolive 作為全球直播平臺此次共上線區(qū)域20+、每個區(qū)域下分組個數(shù)1-3個不等、獎勵配置明細(xì)均需根據(jù)各個區(qū)域用戶消費能力進(jìn)行差異化配置。此時龐大的獎勵展示配置就需要前端進(jìn)行維護(hù)。考慮到研發(fā)手動填寫?yīng)剟钆渲霉ぷ髁可蹙蕖⑷菀滋顚懗鲥e，且配置文件還可能頻繁改動，導(dǎo)致一些不可預(yù)料的人為失誤，目前采用的方案是：

由研發(fā)人員列出所需要填寫的表格字段由產(chǎn)品人員將獎勵配置如：配置所屬區(qū)域、獎勵多語言、獎勵圖片、獎勵數(shù)量、獎勵id、展示類別等數(shù)據(jù)填寫在表格中。使用瀏覽器插件 sheetToCode進(jìn)行批量導(dǎo)出，前端再根據(jù)不同字段進(jìn)行獎勵展示的適配。如果獎勵配置有改動，研發(fā)人員只需要重新用插件導(dǎo)入一遍配置即可，不需要改動原有代碼設(shè)計。

此方案還抽離成了公共組件，供四個年度盛典賽段共同使用，提高了代碼的復(fù)用性，減少繁瑣低效的人力精力投入。

4 Pear系統(tǒng)配置平臺

Bigolive的營收活動，按上線區(qū)域可分為單區(qū)域活動、多區(qū)域活動與全球活動，那么在開發(fā)中就需要對多個國家和區(qū)域做本土化處理，支持23種語言的文案展示。在初期，我們的多語言策略是基于vue-i18n和多語言拉取腳本，使用excel-tobe-json3將多種語言處理成多份js文件，保存在本地，根據(jù)vue-i18n獲取到的語言碼異步加載多語言文案。

由此帶來的問題是，活動線上運行期間，如果產(chǎn)品需要對某句文案做修改，就需要聯(lián)系開發(fā)，開發(fā)在手動運行多語言腳本更新多語言文件，再構(gòu)建項目代碼、代碼 CR、填寫變更、層層審批，走嚴(yán)格的活動發(fā)版流程，耗時良久才能最終展示到用戶面前。如果文案修改多次的話，頻繁的發(fā)版不但影響研發(fā)的日常工作效率，也提升了人為出錯的概率，影響線上活動的穩(wěn)定性；

這次年度盛典活動，采用了公司新搭建的Pear系統(tǒng)配置平臺，通過在遠(yuǎn)程機(jī)器上運行多語言拉取腳本并同步到cdn機(jī)器，就可以得到一份由線上接口獲取的多語言數(shù)據(jù)；在實際體驗中也適當(dāng)?shù)貎?yōu)化了我們技術(shù)的開發(fā)流程，在開發(fā)過程中無需等待去區(qū)域運營翻譯好文檔，而是將業(yè)務(wù)代碼提交上線后，在運行時進(jìn)行vue-i18n的數(shù)據(jù)載入；另外我們封裝了私有庫@bigo/pear-fetch，用以讀取構(gòu)建參數(shù)區(qū)分拉取不同環(huán)境的配置文件，同時拉取一份保底的英文多語言配置（可自行設(shè)置保底語言）用以當(dāng)前語言獲取key失敗時降級使用英文。

Pear系統(tǒng)接入到年度盛典中后，在整個活動進(jìn)行到過程中，產(chǎn)品的文案變動20+次，修改完成在Pear點擊發(fā)布即可上線，實現(xiàn)了文案的“熱更新”，省去了多次構(gòu)建發(fā)布的流程，統(tǒng)計下來至少節(jié)省了18個小時。除了文案的可配置，活動獎勵，賽程安排等靜態(tài)數(shù)據(jù)，也實現(xiàn)了平臺配置化，活動過程中產(chǎn)品需要調(diào)整獎勵數(shù)值和賽程安排，也能通過Pear自行配置，年度盛典的配置修改更靈活，從設(shè)計上將配置與業(yè)務(wù)代碼解耦，降低了溝通成本并提高了整體效率。

5 mp4+canvas替代動圖

年度盛典中設(shè)計大佬希望有更多的動態(tài)元素，在此前的方案中大多使用gif，但不能顯示透明背景，Lottie、Svga等動畫方案則需要為此引入較為龐大的第三方庫，技術(shù)側(cè)為了活動能夠以較小的體積運行上線，在立項期間進(jìn)行了調(diào)研； webp效果很雖好，但在ios舊系統(tǒng)上無法運行，通過搜索沒有發(fā)現(xiàn)比較好的解決方法；在搜尋客戶端播放動圖的技術(shù)中，發(fā)現(xiàn)設(shè)計為客戶端做的動態(tài)禮物素材是一個左右鏡像的mp4文件，通過對比倆邊的像素點（黑色則渲染為透明）將圖像結(jié)合在一起，這樣處理的效果幀數(shù)高、體積小，所以便找尋web是否也可以通過這種方式播放無用戶交互的動畫；

https://user-images.githubusercontent.com/19945145/103343455-11a67100-4ac7-11eb-9d55-d08f3e46d246.mp4

H5實現(xiàn)alpha通道視頻在這篇文章中發(fā)現(xiàn)了可通過video + canvas重新繪制視頻內(nèi)容，當(dāng)描述的點在黑白鏡像內(nèi)是黑色，則設(shè)置為透明，通過實時監(jiān)聽video的play事件繪制canvas，我們就可以得到一個透明底的動圖效果，且兼容性上有良好的表現(xiàn)；

但在實際測試中，發(fā)現(xiàn)低端機(jī)的性能不太好，優(yōu)化點有兩個： 1.完整方法為每個點都繪制，低端機(jī)則每倆個點才繪制； 2.不實時監(jiān)聽play事件，加上間隔時間雖然幀數(shù)會降低，但頁面不會卡頓；

以下為Svga、png、mp4部分性能測試結(jié)果

另外也將video + canvas播放動圖做成了npm庫，之后其他業(yè)務(wù)線需要可以直接使用，不再需要調(diào)試。

總結(jié)

年度盛典中使用到的公共模塊較多，而且今年前端的基建完善了許多，大多數(shù)模塊都進(jìn)行了更替迭代，作為業(yè)務(wù)使用人員需要進(jìn)行嚴(yán)格的內(nèi)部自測流程才可交付驗收，這一部分壓力便落到了進(jìn)行年度盛典開發(fā)的同事們頭上，在時間有限的情況下活動順利驗收提測、順利保障線上運行，是大家共同的努力結(jié)果。

歡迎大家留言討論，祝工作順利、生活愉快！

我是bigo前端，下期見。