通过feDisplacementMap和feImage实现水波特效


Posted in HTML / CSS onApril 24, 2022

1.feDisplacementMap

feDisplacementMap 实际上是一个位置替换滤镜,就是改变元素和图形的像素位置的。遍历原图形的所有像素点,使用feDisplacementMap重新映射替换一个新的位置,形成一个新的图形。feDisplacementMap滤镜在业界的主流应用是对图形进行形变,扭曲,液化。

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

· P'(x,y)指的是转换之后的x, y坐标。
· x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)指的是具体的转换规则。
· XC(x,y)表示当前x,y坐标像素点其X轴方向上设置的对应通道的计算值,范围是0~1。
· YC(x,y)表示当前x,y坐标像素点其Y轴方向上设置的对应通道的计算值,范围是0~1。
· -0.5是偏移值,因此XC(x,y) - 0.5范围是-0.5~0.5YC(x,y) - 0.5范围也是-0.5~0.5
· scale表示计算后的偏移值相乘的比例,scale越大,则偏移越大。

再用一句话解释就是,根据设定的通道颜色对原图的x, y坐标进行偏移。

默认值 取值 说明
xChannelSelector A A or R or G or B 对应XC(x,y),表示X轴坐标使用的是哪个颜色通道进行位置偏移
yChannelSelector A A or R or G or B 对应YC(x,y),表示Y轴坐标使用的是哪个颜色通道进行位置偏移
color-interpolation-filters linearRGB linearRGB or sRGB 滤镜对颜色进行计算时候采用的颜色模式类型
scale 0 可正可负 缩放比例 通常使用正数值处理,值越大,偏移越大。
in SourceGraphic SourceGraphic,SourceAlpha,BackgroundImage, BackgroundAlpha,FillPaint,StrokePaint,以及自定义的滤镜的原始引用 原始图形
in2 元素的result属性值 同in 用来映射的图形

2.通过feDisplacementMap和feImage实现水波特效

实现水波效果通常使用下图

通过feDisplacementMap和feImage实现水波特效

<svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
            <feImage id='feImage' result="pict2" xlink:href="上述图片地址"  x="0" y="0" width="100%" height="100%"></feImage>
            <feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
            <feComposite operator="in" in2="pict2"></feComposite>
            <feComposite in2="SourceGraphic"></feComposite> //这个的目的是因为添加滤镜的元素可见区域和feImage元素的大小一致。融合原有元素保证整个元素都可见
        </filter>
    </defs>
</svg>

水波特效,是通过<feImage>标签 x,y,width,height四个属性和<feDisplacementMap>标签scale动态变化实现。
就像涟漪,以石子掉落处为中心,范围由小扩大,起伏由强减弱。 转为代码,也就是width,height由小变大,scale由大变小
根据点击事件,可以计算出中心坐标(pointX,pointY)

通过feDisplacementMap和feImage实现水波特效

在扩散过程中,中心坐标不变,x,y为图片的起始坐标
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width,height,scale的最大值就可以根据需求来设置啦~

参考资料

https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/

到此这篇关于使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)的文章就介绍到这了!


Tags in this post...

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
什么是css原子化,有什么用?
Apr 24 #HTML / CSS
css3 文字断裂效果
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 #HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 #HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
You might like
php仿ZOL分页类代码
2008/10/02 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php读取excel文件的简单实例
2013/08/26 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
护理专科毕业推荐信
2013/11/10 职场文书
小学数学教学反思
2014/02/02 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
节约用水演讲稿
2014/05/21 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
学校政风行风整改方案
2014/10/25 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
热爱劳动主题班会
2015/08/14 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python