巧用 SVG 滤镜还能制作表情包？
本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。
系列另外两篇：
背景
今天在群里面聊天，看到有人发这个表情包：
刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 feTurbulence 滤镜关联了起来。
如果我们有一张类似上图表情包的静态图，利用 feTurbulence 生成的噪声函数，运用在静态的表情包之上，再添加些许动画，是不是也能制作一张类似的动图效果呢？
什么是 SVG feTurbulence 滤镜？
如果你对 SVG 滤镜还不算太了解，可以简单看看我的这篇文章入门：有意思！强大的 SVG 滤镜
这里我们会用到 SVG 中的 feTurbulence 滤镜。再简单介绍下。
feTurbulence 滤镜
turbulence 意为湍流，不稳定气流，而 SVG <feTurbulence> 滤镜能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用，能产生非常复杂的质感，利用它可以实现了人造纹理比如说云纹、大理石纹的合成。
简单看个 DEMO：
<div>Coco</div>
<div class="turbulence">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 的方式，通过一张静态图得到了一个动态的表情包啦。