巧用 SVG 滤镜还能制作表情包？

本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。

系列另外两篇：

有意思！强大的 SVG 滤镜
有意思！不规则边框的生成方案

背景

今天在群里面聊天，看到有人发这个表情包：

刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 feTurbulence 滤镜关联了起来。

如果我们有一张类似上图表情包的静态图，利用 feTurbulence 生成的噪声函数，运用在静态的表情包之上，再添加些许动画，是不是也能制作一张类似的动图效果呢？

什么是 SVG `feTurbulence` 滤镜？

如果你对 SVG 滤镜还不算太了解，可以简单看看我的这篇文章入门：有意思！强大的 SVG 滤镜

这里我们会用到 SVG 中的 feTurbulence 滤镜。再简单介绍下。

`feTurbulence` 滤镜

turbulence 意为湍流，不稳定气流，而 SVG <feTurbulence> 滤镜能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用，能产生非常复杂的质感，利用它可以实现了人造纹理比如说云纹、大理石纹的合成。

简单看个 DEMO：

代码语言：javascript复制

<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>

代码语言：javascript复制

.turbulence {
    filter: url(#fractal);
}

左边是正常的效果，后边是应用了 <feTurbulence> 的效果，你可以试着点进 Demo，更改 baseFrequency 和 numOctaves 参数的大小，可以看到不同的效果：

CodePen Demo -- feTurbulence text demo

将 `feTurbulence` 滤镜应用于图片

我们尝试把上述 DEMO 中的文字转换成图片。我找到了一张静态的哭的表情包：

简单改造下代码：

代码语言：javascript复制

<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>

代码语言：javascript复制

div {
    background: url(image.jpg);
    filter: url(#fractal);
}

效果如下：

有点那个意思了，我们通过 feTurbulence 滤镜得到了噪声图形，然后通过 feDisplacementMap 滤镜根据 feTurbulence 所产生的噪声图形进行形变，扭曲，液化，得到最终的效果。

通过调整 feTurbulence 中的 baseFrequency 和 numOctaves 以及 feDisplacementMap 中的 scale 参数，我们可以调试得到不同的效果。

接下来，我们再给上述滤镜添加一个动画，利用 SVG 的 animate 标签，动态的改变 baseFrequency 参数：

代码语言：javascript复制

<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，它们的核心代码：

代码语言：javascript复制

<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：

代码语言：javascript复制

<div></div>
<div class="fractal"></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>

代码语言：javascript复制

div {
    width: 200px;
    height: 200px;
    background: url(image.jpeg)
}

.fractal {
    filter: url(#fractal);
}

左边为正常的图像，右边为作用了设置了 SVG 滤镜效果的图像，并且设置了 scale="600"，完全将图片粒子化了：

这个时候，让滤镜的 scale="600" 动态变化回 scale="1"（当此参数为 1 时，图像表示为正常状态），也就能实现一个图形从粒子化到正常化的转变：

代码语言：javascript复制

<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，实现点击之后从模糊到真实：

代码语言：javascript复制

<div id="fe1" class="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>

代码语言：javascript复制

$("#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);
        }
    });
});

点击之前的状态如下：