使用 mask 實現視頻彈幕人物遮罩過濾

常常看一些 LOL 比賽直播的小夥伴，確定都知道，在一些彈幕網站（Bilibili、虎牙）中，當人物與彈幕出如今一塊兒的時候，彈幕會「巧妙」的躲到人物的下面，看着很是的智能。

簡單的一個截圖例子：

其實，這裏是運用了 CSS 中的 MASK 屬性實現的。

mask 簡單用法介紹

以前在多篇文章都提到了 mask，比較詳細的一篇是 -- 奇妙的 CSS MASK，本文不對 mask 的基本概念作過多講解，向下閱讀時，若是對一些 mask 的用法感到疑惑，能夠再去看看。

這裏只簡單介紹下 mask 的基本用法：

最基本，使用 mask 的方式是藉助圖片，相似這樣：

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位圖來作遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 圖形中的形狀來作遮罩 */
}

固然，使用圖片的方式後文會再講。藉助圖片的方式其實比較繁瑣，由於咱們首先還得準備相應的圖片素材，除了圖片，mask 還能夠接受一個相似 background 的參數，也就是漸變。

相似以下使用方法：

{
    mask: linear-gradient(#000, transparent)                      /* 使用漸變來作遮罩 */
}

那該具體怎麼使用呢？一個很是簡單的例子，上述咱們創造了一個從黑色到透明漸變色，咱們將它運用到實際中，代碼相似這樣：

下面這樣一張圖片，疊加上一個從透明到黑色的漸變，

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

應用了 mask 以後，就會變成這樣：

這個 DEMO，能夠先簡單瞭解到 mask 的基本用法。

這裏獲得了使用 mask 最重要結論：添加了 mask 屬性的元素，其內容會與 mask 表示的漸變的 transparent 的重疊部分，而且重疊部分將會變得透明。

值得注意的是，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這裏的 #fff 純色部分其實換成任意顏色均可以，不影響效果。

CodePen Demo -- 使用 MASK 的基本使用

使用 mask 實現人物遮罩過濾

瞭解了 mask 的用法後，接下來，咱們運用 mask，簡單實現視頻彈幕中，彈幕碰到人物，自動被隱藏過濾的例子。

首先，我簡單的模擬了一個召喚師峽谷，以及一些基本的彈幕：

方便示意，這裏使用了一張靜態圖，表示了召喚師峽谷的地圖，並不是真的視頻，而彈幕則是一條一條的 <p> 元素，和實際狀況一致。僞代碼大概是這樣：

<!-- 地圖 -->
<div class="g-map"></div>
<!-- 包裹全部彈幕的容器 -->
<div class="g-barrage-container">
    <!-- 全部彈幕 -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

爲了模擬實際狀況，咱們再用一個 div 添加一個實際的人物，若是不作任何處理，其實就是咱們看視頻打開彈幕的感覺，人物被視頻所遮擋：

注意，這裏我添加了一我的物亞索，而且用 animation 模擬了簡單的運動，在運動的過程當中，人物是被彈幕給遮擋住的。

接下來，就能夠請出 mask 了。

咱們利用 mask 製做一個 radial-gradient ，使得人物附近爲 transparent，而且根據人物運動的 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;
    }
}

實際上就是給放置彈幕的容器，添加一個 mask 屬性，把人物所在的位置標識出來，而且根據人物的運動不斷的去變換這個 mask 便可。咱們把 mask 換成 background，原理一看就懂。

把 mask 替換成 background 示意圖：

background 透明的地方，即 mask 中爲 transparent 的部分，實際就是彈幕會被隱藏遮罩的部分，而其餘白色部分，彈幕不會被隱藏，正是完美的利用了 mask 的特性。

其實這項技術和視頻自己是無關的，咱們只須要根據視頻計算須要屏蔽掉彈幕的位置，獲得相應的 mask 參數便可。若是去掉背景和運動的人物，只保留彈幕和 mask，是這樣的：

須要明確的是，使用 mask，不是將彈幕部分給遮擋住，而是利用 mask，指定彈幕容器之下，哪些部分正常展現，哪些部分透明隱藏。

最後，完整的 Demo 你能夠戳這裏：

CodePen Demo -- mask 實現彈幕人物遮罩過濾

實際生產環境中的運用

固然，上面咱們簡單的還原了利用 mask 實現彈幕遮罩過濾的效果。可是實際狀況比上述的場景複雜的多，由於人物英雄的位置是不肯定的，每一刻都在變化。因此在實際生產環境中，mask 圖片的參數，實際上是由後端實時對視頻進行處理計算出來的，而後傳給前端，前端再進行渲染。

對於運用了這項技術的直播網站，咱們能夠審查元素，看到包裹彈幕的容器的 mask 屬性，每時每刻都在發生變化：

返回回來的實際上是一個 SVG 圖片，大概長這個樣子：

這樣，根據視頻人物的實時位置變化，不斷計算新的 mask，再實時做用於彈幕容器之上，實現遮罩過濾。

最後

本文到此結束，但願對你有幫助 😃，本文介紹了 CSS mask 的一個實際生產環境中，很是有意義的一次實踐，也代表不少新的 CSS 技術，運用得當，仍是能給業務帶來很是有益的幫助的。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。