内容简介:© Young 2019-03-26 21:00Welcome to My运动模糊是指快速运动的物体造成明显的模糊拖动痕迹;
© Young 2019-03-26 21:00
Welcome to My GitHub
运动模糊是指快速运动的物体造成明显的模糊拖动痕迹;
以简单的直线运动为例,运动模糊应该具有两个参数,分别是半径长度和角度;
比如在 Sketch
中如下:
但是 CSS、Canvas、SVG 的滤镜均不支持运动模糊。
那是不是意味着如果设计师只是对一个很简单的图形使用了 Sketch
中的运动模糊滤镜,我们在重构时就必须使用图片来实现呢?
答案并不是。
SVG 的高斯模糊滤镜和 CSS 以及 Canvas 的并不太一样;
CSS 和 Canvas 高斯模糊滤镜都只支持一个参数,但是 SVG 中 feGaussianBlur
标签的 stdDeviation
属性却可以有两个参数,分别表示 X 和 Y 轴上的模糊半径;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blur2"> <feGaussianBlur stdDeviation="20 0" /> </filter> <filter id="blur3"> <feGaussianBlur stdDeviation="11 0" /> </filter> </defs> </svg>
这就意味着如果把 Y 轴的模糊半径设置为 0,那么是可以模拟出水平直线运动的运动模糊效果的。
.demo0{ width:165px; height:165px; border-radius:50%; opacity: 0.62; background-image: radial-gradient(circle at 50% 50%,#4185FC 35%, #0352DB 91%); filter: url("#blur3"); } .demo1{ width:256px; height:256px; background-image:url(../img/lena.jpg); background-size:100% 100%; background-repeat: no-repeat; filter: url("#blur2"); }
另外模拟任意角度的运动模糊效果也是可以的,不过需要进行分层处理,如下:
.layer-reset{ width:256px; height:256px; transform: rotate(-45deg); } .layer-blur{ width:100%; height:100%; filter: url("#blur2"); } .layer-img{ width:100%; height:100%; background-image:url(../img/lena.jpg); background-size:100% 100%; background-repeat: no-repeat; transform: rotate(45deg); }
feGaussianBlur
只能模拟水平或者竖直方向的运动模糊,要想模拟任意角度,就只能对内容进行旋转变换,然后再在最外层进行反向旋转变换还原。
在线示例地址为: https://newbieyoung.github.io/SVG_Learn/filter/demo0.html
在 常用滤镜算法以及WebGL实现 中曾简单介绍过一个基于 WebGL 的滤镜库 WebGLImageFilter ;
作者在实现模糊滤镜也没考虑过运动模糊;
但是我们可以稍作改动来让其支持:
主要改动点为:
-
1、新增第二个参数旋转角度
deg
; -
2、当存在旋转角度时参数时,只进行
Horizontal
的处理; -
3、对待处理片元向量进行旋转变换;
-
4、迭代次数由 7 次改为 30 次,另外权重函数参考 glfx.js triangleblur 的实现。
迭代次数太小会导致模糊半径较大时出现很明显的分块现象, glfx.js 是另外一个基于 WebGL 的滤镜库。
左侧是 Sketch
中 Motion Blur
的滤镜效果,右侧是改动后 WebGLImageFilter
的 blur
滤镜的效果,除了对边缘的处理不一样以外,基本没啥区别。
在线示例地址为: https://newbieyoung.github.io/Html_learn/test/demo1.html 。
关于运动模糊的内容远不止上边这些那么简单,还有一些很复杂的内容,比如3D场景、其它运动模式等,如果有机会再慢慢折腾吧!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- CVPR 2019 | 条件运动传播:从运动中学习物体性质
- 敏捷运动发起人马丁·福勒认为当前敏捷运动是一场悲剧
- 原生JavaScript之完美运动框架
- 运动App 自定义LocationMarker
- RMS 称开源运动是非道德的
- RMS 称开源运动是非道德的
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员的算法趣题
[ 日] 增井敏克 / 绝 云 / 人民邮电出版社 / 2017-7 / 55.00元
本书是一本解谜式的趣味算法书,从实际应用出发,通过趣味谜题的解谜过程,引导读者在愉悦中提升思维能力、掌握算法精髓。此外,本书作者在谜题解答上,通过算法的关键原理讲解,从思维细节入手,发掘启发性算法新解,并辅以Ruby、JavaScript等不同语言编写的源代码示例,使读者在算法思维与编程实践的分合之间,切实提高编程能力。 本书适合已经学习过排序、搜索等知名算法,并想要学习更多有趣算法以提升编程技巧......一起来看看 《程序员的算法趣题》 这本书的介绍吧!