如何利用SVG 滤镜制作动态表情包?

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

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

SVG 滤镜如何制作表情包

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

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

什么是 SVG feTurbulence 滤镜?

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

feTurbulence 滤镜

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

简单看个 DEMO:

<div>Mybj</div>
<div class="turbulence">Mybj</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> 的效果,你可以试着更改 baseFrequency 和 numOctaves 参数的大小,可以看到不同的效果:

feTurbulence 滤镜

将 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 滤镜应用于图片

有点那个意思了,我们通过 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>

添加了动画之后,同样作用于图片之上,我们就可以得到如下的效果:

SVG 滤镜如何制作表情包?

由于截图软件的帧率问题,看着有点慢,大家可以下去copy代码试试,至此我们就简单的利用 CSS 配合 SVG 的方式,通过一张静态图得到了一个动态的表情包啦。

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

其中滤镜中的几个参数 — baseFrequencynumOctavesscale 的改变其实都会得到不一样的效果。我们动态的变化其中的一个或多个也都可以得到不同的动画效果。

动态改变 feDisplacementMap 的 scale 的参数

feDisplacementMap 滤镜是用于改变元素和图形的像素位置的。该滤镜通过遍历原图形的所有像素点,通过 feTurbulence 滤镜产生的噪声函数将原图像的每个像素点重新映射到一个新的位置,形成一个新的图形。

而 scale 表示新得到的图像的扭曲程度,这个值越大,图像越加扭曲不可识别。

通过设置一个非常大初始值,我们可以完全将输入的任何源图像粒子化,看看这个 Demo:

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

CSS代码:

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

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

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

动态改变 feDisplacementMap 的 scale 的参数

这个时候,让滤镜的 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" 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>

JS代码:

$("#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 代码,完整的代码就不贴了,直接上效果图:

是不是非常类似灭霸把人物消失的效果?之前看过这样一篇文章 – 谷歌灭霸彩蛋的效果实现,其中介绍了一种使用 Canvas 实现类似效果的方式,本文这里使用 SVG 滤镜达成了近似的效果。

对源码感兴趣的可以猛戳下面的 Demo,效果也是可以方便的移植到其他元素之上:

CodePen Demo — 使用 SVG 滤镜实现任意元素粒子化 FadeOut 效果

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何利用SVG 滤镜制作动态表情包?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们