本文將介紹一些使用 SVG feTurbulence 濾鏡實作的一些有趣、大膽的的動效，
系列另外兩篇：
- 有意思！強大的 SVG 濾鏡
- 有意思！不規則邊框的生成方案
背景
今天在群里面聊天，看到有人發這個表情包：
剛好最近一直在學習 SVG，腦海中就把這個表情包的效果和 feTurbulence 濾鏡關聯了起來，
如果我們有一張類似上圖表情包的靜態圖，利用 feTurbulence 生成的噪聲函式，運用在靜態的表情包之上，再添加些許影片，是不是也能制作一張類似的動圖效果呢？
什么是 SVG feTurbulence 濾鏡？
如果你對 SVG 濾鏡還不算太了解，可以簡單看看我的這篇文章入門：有意思！強大的 SVG 濾鏡
這里我們會用到 SVG 中的 feTurbulence 濾鏡，再簡單介紹下，
feTurbulence 濾鏡
turbulence 意為湍流，不穩定氣流，而 SVG <feTurbulence> 濾鏡能夠實作半透明的煙熏或波狀影像，通常用于實作一些特殊的紋理，濾鏡利用 Perlin 噪聲函式創建了一個影像，噪聲在模擬云霧效果時非常有用，能產生非常復雜的質感，利用它可以實作了人造紋理比如說云紋、大理石紋的合成，
簡單看個 DEMO：
<div>Coco</div>
<div >Coco</div>
<svg>
<filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1" />
<feDisplacementMap in="SourceGraphic" scale="50"></feDisplacementMap>
</filter>
</svg>
.turbulence {
filter: url(#fractal);
}
左邊是正常的效果，后邊是應用了 <feTurbulence> 的效果，你可以試著點進 Demo，更改 baseFrequency 和 numOctaves 引數的大小，可以看到不同的效果：
CodePen Demo -- feTurbulence text demo
將 feTurbulence 濾鏡應用于圖片
我們嘗試把上述 DEMO 中的文字轉換成圖片，我找到了一張靜態的哭的表情包：
簡單改造下代碼：
<div></div>
<svg>
<filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.09" numOctaves="1" ></feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
</filter>
</svg>
div {
background: url(image.jpg);
filter: url(#fractal);
}
效果如下：
有點那個意思了，我們通過 feTurbulence 濾鏡得到了噪聲圖形，然后通過 feDisplacementMap 濾鏡根據 feTurbulence 所產生的噪聲圖形進行形變，扭曲，液化，得到最終的效果，
通過調整 feTurbulence 中的 baseFrequency 和 numOctaves 以及 feDisplacementMap 中的 scale 引數，我們可以除錯得到不同的效果，
接下來，我們再給上述濾鏡添加一個影片，利用 SVG 的 animate 標簽，動態的改變 baseFrequency 引數：
<svg>
<filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.1 0.1" numOctaves="1" >
<animate
attributeName="baseFrequency"
from="0.1 0.1"
to="0.08 0.01"
dur="3.5s"
repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
</filter>
</svg>
添加了影片之后，同樣作用于圖片之上，我們就可以得到如下的效果：
由于截圖軟體的幀率問題，看著有點慢，你可以戳進 DEMO 看看實際效果，還是挺有意思的，至此我們就簡單的利用 CSS 配合 SVG 的方式，通過一張靜態圖得到了一個動態的表情包啦，??
CodePen Demo -- 使用 SVG 濾鏡 feTurbulence 讓圖片動起來
巧用 feTurbulence 濾鏡實作各種動效
嘿，feTurbulence 當然不是僅能實作這個而已，下面我們再探索一些有意思的場景，
首先，再明確下我們主要使用到的兩個濾鏡 feTurbulence 和 feDisplacementMap，它們的核心代碼：
<svg>
<filter id="feDisplacementMap" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="64">
<feTurbulence type="fractalNoise" baseFrequency="0.0995" numOctaves="1" result="img" />
<feDisplacementMap id="feDis" in="SourceGraphic" in2="img" scale="600" />
</filter>
</svg>
其中濾鏡中的幾個引數 -- baseFrequency、numOctaves、scale 的改變其實都會得到不一樣的效果，我們動態的變化其中的一個或多個也都可以得到不同的影片效果，
動態改變 feDisplacementMap 的 scale 的引數
feDisplacementMap 濾鏡是用于改變元素和圖形的像素位置的，該濾鏡通過遍歷原圖形的所有像素點，通過 feTurbulence 濾鏡產生的噪聲函式將原影像的每個像素點重新映射到一個新的位置，形成一個新的圖形，
而 scale 表示新得到的影像的扭曲程度，這個值越大，影像越加扭曲不可識別，
通過設定一個非常大初始值，我們可以完全將輸入的任何源影像粒子化，看看這個 Demo：
<div></div>
<div ></div>
<svg viewBox="0 0 200 200" width="200px" height="200px">
<defs>
<filter id="fractal" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
<feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="10" seed="1" stitchTiles="noStitch" result="img" />
<feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="G" scale="600" />
</filter>
</defs>
</svg>
div {
width: 200px;
height: 200px;
background: url(image.jpeg)
}
.fractal {
filter: url(#fractal);
}
左邊為正常的影像，右邊為作用了設定了 SVG 濾鏡效果的影像，并且設定了 scale="600"，完全將圖片粒子化了：
這個時候，讓濾鏡的 scale="600" 動態變化回 scale="1"（當此引數為 1 時，影像表示為正常狀態），也就能實作一個圖形從粒子化到正常化的轉變：
<svg viewBox="0 0 200 200" width="200px" height="200px">
<filter id="fractal" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
<feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="10" seed="1" result="img" />
<feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="G" scale="600">
<animate attributeName="scale" values="600;0;0" keyTimes="0;0.75;1" begin="0s" dur="2s" repeatCount="indefinite" />
</feDisplacementMap>
</filter>
</svg>
效果如下：
CodePen -- SVG Filter feTurbulence & feDisplacementMap 實作圖片粒子化復原影片
動態改變 feDisplacementMap 的 scale 的引數實作一些開獎動效
基于上述的效果，我們可以實作這樣一類效果，譬如一些開獎結果，一開始它是模糊的，但是用戶點擊之后，模糊的結果逐漸從模糊到真實，
但是點擊事件，由于 SVG Animate 標簽的一些限制，需要借助一些 Javascript 代碼，這里借用 JQuery 簡單做個示意，
我們有一串開獎陣列 745846，實作點擊之后從模糊到真實：
<div id="fe1" >745846</div>
<svg>
<filter id="feDisplacementMap" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="64">
<feTurbulence type="fractalNoise" baseFrequency="0.0995" numOctaves="1" result="img" />
<feDisplacementMap id="feDis" in="SourceGraphic" in2="img" scale="200" />
</filter>
</svg>
$("#fe1").click((e) => {
const filter = $("#feDis");
const startTime = Date.now();
const duration = 1000;
const target = 200;
requestAnimationFrame(function aniMove() {
const t = Math.min(1, (Date.now() - startTime) / duration);
const nextTarget = target - (t * target) + 1;
filter.attr('scale', nextTarget);
if (t < 1.0) {
requestAnimationFrame(aniMove);
}
});
});
點擊之前的狀態如下：
點擊之后：
上述效果，你可以套用到任何地方，完整的 Demo 地址：
CodePen Demo -- SVG Filter Button Effects
動態改變 feDisplacementMap 的 scale 的引數實作一些 fadeOut 影片
當然，上述的效果也是可以反著來的，就是一張圖（或者任何元素），點擊之后粒子化，然后漸變的消失，進階版的 fadeOut 效果，
通過動態的改變濾鏡的引數和圖片的透明度，當然，也需要借助一些 JavaScript 代碼，完整的代碼就不貼了（與上述 DEMO 非常類似），直接上效果圖：
是不是非常類似滅霸把人物消失的效果？之前看過這樣一篇文章 - 谷歌滅霸彩蛋的效果實作，其中介紹了一種使用 Canvas 實作類似效果的方式，本文這里使用 SVG 濾鏡達成了近似的效果，
對原始碼感興趣的可以猛戳下面的 Demo，效果也是可以方便的移植到其他元素之上：
CodePen Demo -- 使用 SVG 濾鏡實作任意元素粒子化 FadeOut 效果
不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸， ——文森特?梵高
最后
好了，本文到此結束，希望對你有幫助 ??
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270848.html
標籤：Html/Css
下一篇：Vue中路由傳參