运动模糊滤镜

2,000 阅读3分钟
原文链接: newbieweb.lione.me

运动模糊是指快速运动的物体造成明显的模糊拖动痕迹;

以简单的直线运动为例,运动模糊应该具有两个参数,分别是半径长度和角度;

比如在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只能模拟水平或者竖直方向的运动模糊,要想模拟任意角度,就只能对内容进行旋转变换,然后再在最外层进行反向旋转变换还原。

在线示例地址为:newbieyoung.github.io/SVG_Learn/f…

常用滤镜算法以及WebGL实现中曾简单介绍过一个基于 WebGL 的滤镜库 WebGLImageFilter

作者在实现模糊滤镜也没考虑过运动模糊;

但是我们可以稍作改动来让其支持:

主要改动点为:

  • 1、新增第二个参数旋转角度deg

  • 2、当存在旋转角度时参数时,只进行Horizontal的处理;

  • 3、对待处理片元向量进行旋转变换;

  • 4、迭代次数由 7 次改为 30 次,另外权重函数参考 glfx.js triangleblur 的实现。

迭代次数太小会导致模糊半径较大时出现很明显的分块现象,glfx.js 是另外一个基于 WebGL 的滤镜库。

左侧是SketchMotion Blur的滤镜效果,右侧是改动后WebGLImageFilterblur滤镜的效果,除了对边缘的处理不一样以外,基本没啥区别。

在线示例地址为:newbieyoung.github.io/Html_learn/…

关于运动模糊的内容远不止上边这些那么简单,还有一些很复杂的内容,比如3D场景、其它运动模式等,如果有机会再慢慢折腾吧!