-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
震惊!巧用 SVG 滤镜还能制作表情包? #107
Comments
学到了! |
This was referenced Mar 30, 2021
Open
Open
总算找到了新大陆的开辟方式 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
本文将介绍一些使用 SVG
feTurbulence
滤镜实现的一些有趣、大胆的的动效。系列另外两篇:
背景
今天在群里面聊天,看到有人发这个表情包:
刚好最近一直在学习 SVG,脑海中就把这个表情包的效果和
feTurbulence
滤镜关联了起来。如果我们有一张类似上图表情包的静态图,利用
feTurbulence
生成的噪声函数,运用在静态的表情包之上,再添加些许动画,是不是也能制作一张类似的动图效果呢?什么是 SVG
feTurbulence
滤镜?如果你对 SVG 滤镜还不算太了解,可以简单看看我的这篇文章入门:有意思!强大的 SVG 滤镜
这里我们会用到 SVG 中的
feTurbulence
滤镜。再简单介绍下。feTurbulence
滤镜turbulence 意为湍流,不稳定气流,而 SVG
<feTurbulence>
滤镜能够实现半透明的烟熏或波状图像。通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用,能产生非常复杂的质感,利用它可以实现了人造纹理比如说云纹、大理石纹的合成。简单看个 DEMO:
左边是正常的效果,后边是应用了
<feTurbulence>
的效果,你可以试着点进 Demo,更改baseFrequency
和numOctaves
参数的大小,可以看到不同的效果:CodePen Demo -- feTurbulence text demo
将
feTurbulence
滤镜应用于图片我们尝试把上述 DEMO 中的文字转换成图片。我找到了一张静态的哭的表情包:
简单改造下代码:
效果如下:
有点那个意思了,我们通过
feTurbulence
滤镜得到了噪声图形,然后通过feDisplacementMap
滤镜根据feTurbulence
所产生的噪声图形进行形变,扭曲,液化,得到最终的效果。通过调整
feTurbulence
中的baseFrequency
和numOctaves
以及feDisplacementMap
中的scale
参数,我们可以调试得到不同的效果。接下来,我们再给上述滤镜添加一个动画,利用 SVG 的
animate
标签,动态的改变baseFrequency
参数:添加了动画之后,同样作用于图片之上,我们就可以得到如下的效果:
由于截图软件的帧率问题,看着有点慢,你可以戳进 DEMO 看看实际效果,还是挺有意思的,至此我们就简单的利用 CSS 配合 SVG 的方式,通过一张静态图得到了一个动态的表情包啦。:grin:
CodePen Demo -- 使用 SVG 滤镜 feTurbulence 让图片动起来
巧用
feTurbulence
滤镜实现各种动效嘿,
feTurbulence
当然不是仅能实现这个而已,下面我们再探索一些有意思的场景。首先,再明确下我们主要使用到的两个滤镜
feTurbulence
和feDisplacementMap
,它们的核心代码:其中滤镜中的几个参数 --
baseFrequency
、numOctaves
、scale
的改变其实都会得到不一样的效果。我们动态的变化其中的一个或多个也都可以得到不同的动画效果。动态改变
feDisplacementMap
的scale
的参数feDisplacementMap
滤镜是用于改变元素和图形的像素位置的。该滤镜通过遍历原图形的所有像素点,通过feTurbulence
滤镜产生的噪声函数将原图像的每个像素点重新映射到一个新的位置,形成一个新的图形。而
scale
表示新得到的图像的扭曲程度,这个值越大,图像越加扭曲不可识别。通过设置一个非常大初始值,我们可以完全将输入的任何源图像粒子化,看看这个 Demo:
左边为正常的图像,右边为作用了设置了 SVG 滤镜效果的图像,并且设置了
scale="600"
,完全将图片粒子化了:这个时候,让滤镜的
scale="600"
动态变化回scale="1"
(当此参数为 1 时,图像表示为正常状态),也就能实现一个图形从粒子化到正常化的转变:效果如下:
CodePen -- SVG Filter feTurbulence & feDisplacementMap 实现图片粒子化复原动画
动态改变
feDisplacementMap
的scale
的参数实现一些开奖动效基于上述的效果,我们可以实现这样一类效果,譬如一些开奖结果,一开始它是模糊的,但是用户点击之后,模糊的结果逐渐从模糊到真实。
但是点击事件,由于 SVG Animate 标签的一些限制,需要借助一些 Javascript 代码,这里借用 JQuery 简单做个示意。
我们有一串开奖数组
745846
,实现点击之后从模糊到真实:点击之前的状态如下:
点击之后:
上述效果,你可以套用到任何地方,完整的 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前端趣闻 😄
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
The text was updated successfully, but these errors were encountered: