内容简介:© 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 称开源运动是非道德的
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript Patterns
Stoyan Stefanov / O'Reilly Media, Inc. / 2010-09-21 / USD 29.99
What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced d......一起来看看 《JavaScript Patterns》 这本书的介绍吧!