使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)
我要评论该文章已经讲的特别细致了，该篇仅以此记录动效过程中各点的计算。
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.5，YC(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 | 同in | 用来映射的图形 |
2.通过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）
在扩散过程中，中心坐标不变，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滤镜实现水波纹效果(计算动态值)的文章就介绍到这了,更多相关feDisplacementMap滤镜水波纹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21- 这篇文章主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSS Grid布局的基础知识和如何实现自动换行的网格布局，感兴趣的朋友一起看看吧2025-04-21
本文介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的2025-03-11- HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用,文章还介绍了高级用法,如存储JSON数据、事2025-03-11
- 在HTML5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨<select>标签的属性、样式，并重点介2025-02-27
本文介绍了HTML5InputDatePicker对象表示HTML``元素,是HTML5中的新对象,介绍了日期、周、月份、时间、日期+时间、本地日期时间等不同类型的日期选择器，感兴趣的朋友一起看2025-02-17
本文介绍了HTML5中的超链接、相对路径和图片的使用方法,超链接可以创建指向另一个文档或页面内部书签的链接,相对路径用于在同一服务器内部跳转页面,图片标签用于引入外部图2025-02-17- 本文介绍了HTML5超链接的创建方法,包括基本语法、创建图像超链接的边框去除方法以及锚点链接的使用,还讨论了超链接的四种不同状态（link、visited、hover、active）的CSS样2025-02-17
最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，2024-11-03
最新评论