阅读模式:

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

阅读量:13  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。系列另外两篇:有意思!强大的 SVG 滤镜有意思!不规则边框的生成方案背景今天在群里面聊天,看到有人发这个表情包:刚好最近一直在学习 SVG,脑海中就把......

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

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

系列另外两篇:

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

背景

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

刚好最近一直在学习 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,更改 baseFrequencynumOctaves 参数的大小,可以看到不同的效果:

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 中的 baseFrequencynumOctaves 以及 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 的方式,通过一张静态图得到了一个动态的表情包啦。

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: