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

作者：SbCoco 2021-02-23 11:27:06

開發前端

本文介紹了 CSS mask 的一個實際生產環境中，非常有意義的一次實踐，也表明很多新的 CSS 技術，運用得當，還是能給業務帶來非常有益的幫助的。

經常看一些 LOL 比賽直播的小伙伴，肯定都知道，在一些彈幕網站(Bilibili、虎牙)中，當人物與彈幕出現在一起的時候，彈幕會“巧妙”的躲到人物的下面，看著非常的智能。

簡單的一個截圖例子：

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

mask 簡單用法介紹

之前在多篇文章都提到了 mask，比較詳細的一篇是 -- 奇妙的 CSS MASK[1]，本文不對 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 之后，就會變成這樣：

[[383184]]

這個 DEMO，可以先簡單了解到 mask 的基本用法。

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

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

CodePen Demo -- 使用 MASK 的基本使用[2]

使用 mask 實現人物遮罩過濾

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

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

方便示意，這里使用了一張靜態圖，表示了召喚師峽谷的地圖，并非真的視頻，而彈幕則是一條一條的

元素，和實際情況一致。偽代碼大概是這樣：

<!-- 地圖 --> 
<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; 
    } 
}