通过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 相关文章推荐
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python K近邻算法的kd树实现
2018/09/06 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
三好学生自我鉴定
2013/12/17 职场文书
顶撞领导检讨书
2014/01/29 职场文书
驾驶员安全责任书
2014/07/22 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
学习保证书怎么写
2015/02/26 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android