聲明：本文涉及圖文和模型素材僅用于個人學(xué)習(xí)、研究和欣賞，請勿二次修改、非法傳播、轉(zhuǎn)載、出版、商用、及進(jìn)行其他獲利行為。

背景

如果你有玩過????《王者榮耀》、《陰陽師》?等手游，一定注意到過它的啟動動畫、皮膚立繪卡片等場景，經(jīng)常采用靜態(tài)底圖加局部液態(tài)流動效果的簡單動畫，這些流動動畫可能出現(xiàn)在緩緩流動的水流???、迎風(fēng)飄動的旗幟???、游戲角色衣袖????♀?、隨著時間緩動的云、雨、霧天氣效果???等。這種過渡效果不僅節(jié)省了開發(fā)全量動畫的成本，而且使得游戲畫面更加熱血、冒險、奧德賽、高級，也更加容易吸引玩家氪金???。

本文使用前端開發(fā)技術(shù)，結(jié)合?SVG?和?CSS?來實(shí)現(xiàn)類似的液化流動效果。本文包含的知識點(diǎn)主要包括：mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動畫以及input[type=file]?本地圖片資源加載等。

效果

先來看看實(shí)現(xiàn)效果，下面幾個示例以及????文章?Banner?圖都是應(yīng)用了由本文內(nèi)容生成的液態(tài)流動動畫效果。由于GIF?圖壓縮比較嚴(yán)重，動畫效果看起來不是很流暢???，大家不妨通過以下演示頁面鏈接，親自體驗(yàn)一下效果，生成自己的?傳說、典藏?皮膚立繪吧???。

• ??????在線體驗(yàn)：https://dragonir.github.io/paint-heat-map/

• ??????在線體驗(yàn)：https://codepen.io/dragonir/full/qBoxQKW

???霧氣擴(kuò)散?塞爾達(dá)傳說：曠野之息

???衣袖飄動?貂蟬：貓影幻舞

???湖光波動

???文字液化

???ps：體驗(yàn)頁面部署在?Gitpage?上傳圖片功能不是真正上傳到服務(wù)器，而是只會加載到瀏覽器本地，頁面不會獲取任何信息，大家可以放心體驗(yàn)，不用擔(dān)心隱私泄漏問題。

實(shí)現(xiàn)

頁面主要由?2?部分構(gòu)成，頂部用于加載圖片 ，并且可以通過按住????鼠標(biāo)劃動的方式繪制熱點(diǎn)路徑，給圖片添加流動效果；底部是控制區(qū)域，點(diǎn)擊按鈕????清除畫布，可以清除繪制的流動動畫效果、點(diǎn)擊按鈕????切換圖片可以加載本地的圖片。

???注意，還有一個隱形的功能，當(dāng)你繪制完成時，可以點(diǎn)擊????鼠標(biāo)右鍵，然后選擇保存圖片，保存的這張圖片就是我們繪制流體動畫路徑的熱點(diǎn)圖，利用這張熱點(diǎn)圖，使用本文的?CSS?知識，就能把靜態(tài)圖片轉(zhuǎn)化成動態(tài)圖啦！

HTML 頁面結(jié)構(gòu)

#sketch?元素主要是用于繪制和加載流動效果熱點(diǎn)圖的畫板；#button_container?是頁面底部的按鈕控制區(qū)域；svg?元素用于利用其?filter?濾鏡實(shí)現(xiàn)液態(tài)流動動畫效果，包括?feTurbulence?和?feDisplacementMap?濾鏡。

?? feTurbulence 和 feDisplacementMap

• feTurbulence：濾鏡利用?Perlin?噪聲函數(shù)創(chuàng)建了一個圖像，利用它可以實(shí)現(xiàn)人造紋理比如說云紋、大理石紋等模擬濾鏡效果。

• feDisplacementMap：映射置換濾鏡，該濾鏡用來自圖像中從?in2?到空間的像素值置換圖像從?in?到空間的像素值。即它可以改變元素和圖形的像素位置，通過遍歷原圖形的所有像素點(diǎn)，feDisplacementMap?重新映射替換一個新的位置，形成一個新的圖形。該濾鏡在業(yè)界的主流應(yīng)用是對圖形進(jìn)行形變，扭曲，液化。

CSS 樣式

接著看看樣式的實(shí)現(xiàn)，main?元素作為主容器并將主圖案作為背景圖片；canvas?作為畫布占據(jù)?100%?的空間位置；.mask?和?.mask-inner?用于生成如下圖所示熱點(diǎn)路徑與背景圖相溶的效果，這種效果是借助?mask-image?實(shí)現(xiàn)的。最后，為了生成動態(tài)流動效果，.mask-inner?通過?filter: url(#heat)?將前面生成的?svg?作為濾鏡來源，后續(xù)即將在?JavaScript?中通過不間斷修改?svg?濾鏡的屬性，來生成液態(tài)流動動畫。

?? mask-image

mask-image?CSS?屬性用于設(shè)置元素上遮罩層的圖像。

語法：

兼容性：

??此功能某些瀏覽器尚在開發(fā)中，需要使用瀏覽器前綴以兼容不同瀏覽器。

JavaScript 方法

① 繪制熱點(diǎn)圖

監(jiān)聽鼠標(biāo)移動和點(diǎn)擊事件，在?canvas?上繪制波動路徑熱點(diǎn)。

繪制完成后，可以在頁面中右鍵保存生成的波動路徑熱點(diǎn)圖，直接將繪制滿意的熱點(diǎn)圖放到?CSS?中，就能給喜歡的圖片添加局部波動效果了，下面這張圖片就是本示例頁面使用的波動的熱點(diǎn)路徑圖。

② 生成動畫

為了生成實(shí)時更新的波動效果，本文使用了?TweenMax?來通過改變?feTurbulence?的?baseFrequency?屬性值來實(shí)現(xiàn)，使用其他動畫庫或使用?requestAnimationFrame?也是可以實(shí)現(xiàn)相同的功能。

③ 清除畫布

點(diǎn)擊清除畫布按鈕，可以清空已經(jīng)繪制的波動路徑，主要是通過清除頁面元素?mask-image?的屬性值以及清?canvas?畫布來實(shí)現(xiàn)的。

④ 切換圖片

點(diǎn)擊切換圖片，可以加載本地的一張圖片作為繪制底圖，該功能是通過?input[type=file]?來實(shí)現(xiàn)圖片資源的獲取，然后通過修改?CSS?將它設(shè)置成新的畫布背景。

到這里，全部功能都實(shí)現(xiàn)完畢了，大家趕快制作一張自己喜歡的?史詩皮膚?或?奧德賽小游戲?的啟動頁面吧???。

???源碼地址：https://github.com/dragonir/paint-heat-map

總結(jié)

本文包含的新知識點(diǎn)主要包括：

• mask-image?遮罩元素

• feTurbulence?和?feDisplacementMap?svg濾鏡

• filter?屬性

• Canvas?繪制方法

• TimelineMax?動畫

• input[type=file]?本地圖片資源加載

想了解其他前端知識或其他未在本文中詳細(xì)描述的?Web 3D?開發(fā)技術(shù)相關(guān)知識，可閱讀我往期的文章。轉(zhuǎn)載請注明原文地址和作者。如果覺得文章對你有幫助，不要忘了一鍵三連哦 ??。

參考

• [1].?https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feTurbulence

• [2].?https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feDisplacementMap

• [3].?https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

• [4].?https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter