巧用 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 的方式,通过一张静态图得到了一个动态的表情包啦。
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 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>
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" 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>
$("#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前端趣闻
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
巧用 SVG 滤镜还能制作表情包?的更多相关文章
- canvas 制作表情包
canvas 制作表情包 代码如下. <!DOCTYPE html> <html> <head> <title>表情制作</title> & ...
- 有意思!强大的 SVG 滤镜
想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼.让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼.题图为袁川老师使用 SVG 滤镜实现的云彩效 ...
- 【腾讯Bugly干货分享】舞动的表情包——浅析GIF格式图片的存储和压缩
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/v0pffOhjFWnVbU2lXjuEmw 导语 G ...
- 怎样用手机把视频变成GIF表情包?原来那么简单,网友:看完涨知识了
现如今表情包几乎成了,我们手机聊天的必需品了.不过相比于普通表情包,大家更喜欢用GIF表情包,因为动图表情包不仅更加搞笑,而且能更形象的表达我们的情绪.比较有想法的朋友甚至想自己制作GIF表情包,但是 ...
- 如何制作微信动态表情包 GIF制作工具哪个好
表情包已经成为我们生活聊天中必不可少的一部分,但是如何制作微信动态表情包呢?自己制作的表情包更加独有个性,今天小编带大家看一波原创表情包的制作方法吧! 使用工具:电脑 操作方法: 1.首先在手机上也是 ...
- svg滤镜学习
SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一. SVG滤镜的原理 基本原理描述太多 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- python截取视频制作动态表情包+文字
1:安装moviepy库 2:安装IPython库 代码如下: from moviepy.editor import * from IPython.display import Image def B ...
- 烂泥:Linux源码包制作RPM包之Apache
本文由秀依林枫提供友情赞助,首发于烂泥行天下 公司服务器比较多,需要把apache源码包制作成rpm包,然后放到公司内网yum源上进行下载安装.apache的rpm包安装方式比源码安装方式比较快,这能 ...
随机推荐
- 联合登录 & OAuth 2.0 & OpenID
联合登录 & OAuth 2.0 & OpenID 第三方联合登录一般可以降低网站的获客成本,所以一般的网站都会做一些联合登录,常用的就是QQ.微信.微博; https://www.z ...
- 大送福利!市场香饽饽VAST到底什么来头,为何被高价估值
近日,NGK星空计划新币VAST成为了香饽饽,还未正式上线前,市场讨论的热度就居高不下.如今NGK推出1万VAST免费送新人福利更是将这波热度推向了高潮. 具体福利规则:在美国加州时间2021年2月8 ...
- Masterboxan INC发布印尼电商市场报告
据海外媒体报导,Masterboxan INC(编号:20151264097)发布了印尼电商市场观察报告,指出印尼电商市场仍然有很大的发展潜力. Masterboxan INC表示,与发达国家从 PC ...
- 最实用JS 留着学习
1.A标签删除 function input(){ var b = window.confirm("确认要删除本条信息!"); if(b==true){ ret ...
- ELK的一点认识
为什么需要ELK: 一般大型系统是一个分布式部署的架构,不同的服务模块部署在不同的服务器上,问题出现时,大部分情况需要根据问题暴露的关键信息,定位到具体的服务器和服务模块,构建一套集中式日志系统,可以 ...
- 几个小实践带你快速上手MindSpore
摘要:本文将带大家通过几个小实践快速上手MindSpore,其中包括MindSpore端边云统一格式及华为智慧终端背后的黑科技. MindSpore介绍 MindSpore是一种适用于端边云场景的新型 ...
- C# 使用 Index 和 Range 简化集合操作
C# 使用 Index 和 Range 简化集合操作 Intro 有的语言数组的索引值是支持负数的,表示从后向前索引,比如:arr[-1] 从 C# 8 开始,C# 支持了数组的反向 Index,和 ...
- 【Notes_9】现代图形学入门——光线追踪(基本原理)
跟着闫令琪老师的课程学习,总结自己学习到的知识点 课程网址GAMES101 B站课程地址GAMES101 课程资料百度网盘[提取码:0000] 目录 光线追踪 为什么要光线追踪 soft shadow ...
- Linux-两种磁盘分区方式
Linux文件设备 要理解Linux,首先要理解Linux文件结构 在Linux操作系统中,几乎所有的设备都位于/dev目录中 名称 作用 位置 SATA接口 电脑硬盘接口 /dev/sd[a-p] ...
- 第29天学习打卡(迭代器、泛型 、Collection工具类、set集合的特点及应用、Map集合的特点及应用)
迭代器 对过程的重复,称为迭代. 迭代器是遍历Collection集合的通用方式,可以在对集合遍历的同时进行添加.删除等操作. 迭代器的常用方法 next():返回迭代的下一个元素对象 hasNext ...