通过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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python实现简单图书管理系统
2019/11/22 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python类成员继承重写的实现
2020/09/16 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
工程师岗位职责
2013/11/08 职场文书
2014年高考决心书
2014/03/11 职场文书
银行求职自荐信
2014/06/30 职场文书
平安工地汇报材料
2014/08/19 职场文书
信仰心得体会
2014/09/05 职场文书
会计简历自我评价
2015/03/10 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL