通过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 相关文章推荐
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
使用CSS定位HTML元素的实现方法
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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解vue中组件参数
2018/07/09 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
Python中字典和集合学习小结
2017/07/07 Python
python基于http下载视频或音频
2018/06/20 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python实现logistic分类算法代码
2020/02/28 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
JDO的含义
2012/11/17 面试题
职专应届生求职信
2013/11/16 职场文书
大学学习生活感言
2014/01/18 职场文书
领导干部培训感言
2014/01/23 职场文书
5s标语大全
2014/06/23 职场文书
生活部的活动方案
2014/08/19 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
python基础之类属性和实例属性
2021/10/24 Python
Django框架中视图的用法
2022/06/10 Python