通过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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML5之语义标签介绍
Jul 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php中Smarty模板初体验
2011/08/08 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Symfony核心类概述
2016/03/17 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JS面向对象编程详解
2016/03/06 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Selenium的使用详解
2018/10/19 Python
selenium+python环境配置教程详解
2019/05/28 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
python程序如何进行保存
2020/07/03 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 下划线的不同用法
2020/10/24 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
食品安全工作方案
2014/05/07 职场文书
百万英镑观后感
2015/06/09 职场文书
五年级数学教学反思
2016/02/16 职场文书