使用 MASK 實(shí)現(xiàn)視頻彈幕人物遮罩過(guò)濾
經(jīng)?？匆恍?LOL 比賽直播的小伙伴，肯定都知道，在一些彈幕網(wǎng)站(Bilibili、虎牙)中，當(dāng)人物與彈幕出現(xiàn)在一起的時(shí)候，彈幕會(huì)“巧妙”的躲到人物的下面，看著非常的智能。
簡(jiǎn)單的一個(gè)截圖例子：
其實(shí)，這里是運(yùn)用了 CSS 中的 MASK 屬性實(shí)現(xiàn)的。
mask 簡(jiǎn)單用法介紹
之前在多篇文章都提到了 mask，比較詳細(xì)的一篇是 -- 奇妙的 CSS MASK[1]，本文不對(duì) mask 的基本概念做過(guò)多講解，向下閱讀時(shí)，如果對(duì)一些 mask 的用法感到疑惑，可以再去看看。
這里只簡(jiǎn)單介紹下 mask 的基本用法：
最基本，使用 mask 的方式是借助圖片，類似這樣：
- {
- /* Image values */
- mask: url(mask.png); /* 使用位圖來(lái)做遮罩 */
- mask: url(masks.svg#star); /* 使用 SVG 圖形中的形狀來(lái)做遮罩 */
- }
當(dāng)然，使用圖片的方式后文會(huì)再講。借助圖片的方式其實(shí)比較繁瑣，因?yàn)槲覀兪紫冗€得準(zhǔn)備相應(yīng)的圖片素材，除了圖片，mask 還可以接受一個(gè)類似 background 的參數(shù)，也就是漸變。
類似如下使用方法：
- {
- mask: linear-gradient(#000, transparent) /* 使用漸變來(lái)做遮罩 */
- }
那該具體怎么使用呢?一個(gè)非常簡(jiǎn)單的例子，上述我們創(chuàng)造了一個(gè)從黑色到透明漸變色，我們將它運(yùn)用到實(shí)際中，代碼類似這樣：
下面這樣一張圖片，疊加上一個(gè)從透明到黑色的漸變，
- {
- background: url(image.png) ;
- mask: linear-gradient(90deg, transparent, #fff);
- }
應(yīng)用了 mask 之后，就會(huì)變成這樣：
這個(gè) DEMO，可以先簡(jiǎn)單了解到 mask 的基本用法。
這里得到了使用 mask 最重要結(jié)論：添加了 mask 屬性的元素，其內(nèi)容會(huì)與 mask 表示的漸變的 transparent 的重疊部分，并且重疊部分將會(huì)變得透明。
值得注意的是，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這里的 #fff 純色部分其實(shí)換成任意顏色都可以，不影響效果。
CodePen Demo -- 使用 MASK 的基本使用[2]
使用 mask 實(shí)現(xiàn)人物遮罩過(guò)濾
了解了 mask 的用法后，接下來(lái)，我們運(yùn)用 mask，簡(jiǎn)單實(shí)現(xiàn)視頻彈幕中，彈幕碰到人物，自動(dòng)被隱藏過(guò)濾的例子。
首先，我簡(jiǎn)單的模擬了一個(gè)召喚師峽谷，以及一些基本的彈幕：
方便示意，這里使用了一張靜態(tài)圖，表示了召喚師峽谷的地圖，并非真的視頻，而彈幕則是一條一條的
元素，和實(shí)際情況一致。偽代碼大概是這樣：
- <!-- 地圖 -->
- <div class="g-map"></div>
- <!-- 包裹所有彈幕的容器 -->
- <div class="g-barrage-container">
- <!-- 所有彈幕 -->
- <div class="g-barrage">6666</div>
- ...
- <div class="g-barrage">6666</div>
- </div>
為了模擬實(shí)際情況，我們?cè)儆靡粋€(gè) div 添加一個(gè)實(shí)際的人物，如果不做任何處理，其實(shí)就是我們看視頻打開彈幕的感受，人物被視頻所遮擋：
注意，這里我添加了一個(gè)人物亞索，并且用 animation 模擬了簡(jiǎn)單的運(yùn)動(dòng)，在運(yùn)動(dòng)的過(guò)程中，人物是被彈幕給遮擋住的。
接下來(lái)，就可以請(qǐng)出 mask 了。
我們利用 mask 制作一個(gè) radial-gradient ，使得人物附近為 transparent，并且根據(jù)人物運(yùn)動(dòng)的 animation，給 mask 的 mask-position 也添加上相同的 animation 即可。最終可以得到這樣的效果：
- .g-barrage-container {
- position: absolute;
- mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
- animation: mask 10s infinite alternate;
- }
- @keyframes mask {
- 100% {
- mask-position: 85vw 0;
- }
- }
實(shí)際上就是給放置彈幕的容器，添加一個(gè) mask 屬性，把人物所在的位置標(biāo)識(shí)出來(lái)，并且根據(jù)人物的運(yùn)動(dòng)不斷的去變換這個(gè) mask 即可。我們把 mask 換成 background，原理一看就懂。
把 mask 替換成 background 示意圖：
background 透明的地方，即 mask 中為 transparent 的部分，實(shí)際就是彈幕會(huì)被隱藏遮罩的部分，而其他白色部分，彈幕不會(huì)被隱藏，正是完美的利用了 mask 的特性。
其實(shí)這項(xiàng)技術(shù)和視頻本身是無(wú)關(guān)的，我們只需要根據(jù)視頻計(jì)算需要屏蔽掉彈幕的位置，得到相應(yīng)的 mask 參數(shù)即可。如果去掉背景和運(yùn)動(dòng)的人物，只保留彈幕和 mask，是這樣的：
需要明確的是，使用 mask，不是將彈幕部分給遮擋住，而是利用 mask，指定彈幕容器之下，哪些部分正常展示，哪些部分透明隱藏。
最后，完整的 Demo 你可以戳這里：
CodePen Demo -- mask 實(shí)現(xiàn)彈幕人物遮罩過(guò)濾[3]
實(shí)際生產(chǎn)環(huán)境中的運(yùn)用
當(dāng)然，上面我們簡(jiǎn)單的還原了利用 mask 實(shí)現(xiàn)彈幕遮罩過(guò)濾的效果。但是實(shí)際情況比上述的場(chǎng)景復(fù)雜的多，因?yàn)槿宋镉⑿鄣奈恢檬遣淮_定的，每一刻都在變化。所以在實(shí)際生產(chǎn)環(huán)境中，mask 圖片的參數(shù)，其實(shí)是由后端實(shí)時(shí)對(duì)視頻進(jìn)行處理計(jì)算出來(lái)的，然后傳給前端，前端再進(jìn)行渲染。
對(duì)于運(yùn)用了這項(xiàng)技術(shù)的直播網(wǎng)站，我們可以審查元素，看到包裹彈幕的容器的 mask 屬性，每時(shí)每刻都在發(fā)生變化：
返回回來(lái)的其實(shí)是一個(gè) SVG 圖片，大概長(zhǎng)這個(gè)樣子：
這樣，根據(jù)視頻人物的實(shí)時(shí)位置變化，不斷計(jì)算新的 mask，再實(shí)時(shí)作用于彈幕容器之上，實(shí)現(xiàn)遮罩過(guò)濾。
最后
本文到此結(jié)束，希望對(duì)你有幫助 :)，本文介紹了 CSS mask 的一個(gè)實(shí)際生產(chǎn)環(huán)境中，非常有意義的一次實(shí)踐，也表明很多新的 CSS 技術(shù)，運(yùn)用得當(dāng)，還是能給業(yè)務(wù)帶來(lái)非常有益的幫助的。
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[4] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。
參考資料
[1]奇妙的 CSS MASK:
https://github.com/chokcoco/iCSS/issues/80
[2]CodePen Demo -- 使用 MASK 的基本使用:
https://codepen.io/Chokcoco/pen/YzwZbLQ
[3]CodePen Demo -- mask 實(shí)現(xiàn)彈幕人物遮罩過(guò)濾:
https://codepen.io/Chokcoco/pen/MWbyjoX
[4]Github -- iCSS:
https://github.com/chokcoco/iCSS
