svg模糊_SVG的运动模糊效果

svg模糊

View demo 查看演示 Download Source 下载源

Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements.

今天，我们将向您展示如何制作运动模糊效果，并将其应用于HTML元素的常规JS或CSS动画。

Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural.

运动模糊是一种通常广泛用于运动图形和动画中的技术，可以使运动看起来更加平滑自然。

Motion blur is the apparent streaking of rapidly moving objects in a still image or a sequence of images such as a movie or animation. It results when the image being recorded changes during the recording of a single frame, either due to rapid movement or long exposure.

运动模糊是静止图像或一系列图像(例如电影或动画)中快速移动的对象的明显条纹。 当记录的图像由于快速移动或长时间曝光而在单帧的记录过程中发生变化时，会导致这种情况。

— Motion blur on Wikipedia

—维基百科上的运动模糊

In this article, we’ll take a look at how to make an approximation of that effect, for horizontal or vertical transitions.

在本文中，我们将研究如何对水平或垂直过渡效果进行近似处理。

Attention: Please keep in mind that this effect is 注意：请记住，此效果是 highly experimental and only supported by some modern browsers. Chrome seems to have the best performance for it as of now. 高度实验性的，仅某些现代浏览器支持。 到目前为止，Chrome似乎拥有最佳的性能。

In order to apply a motion blur effect to an animation, we need to apply a directional blur to the object according to the speed and direction it is moving, for every frame.

为了对动画应用运动模糊效果，我们需要根据对象的移动速度和方向为每个帧对其应用方向模糊。

Let’s take a look at the steps we need to take to understand how the effect works:

让我们看一下我们需要采取的步骤，以了解效果如何发挥作用：

设置模糊 (Setting the blur)

Since the regular CSS blur filter does not support directional blur, we are going to have to use SVG filters. We’ve already covered the basics of SVG filters in the Creative Gooey Effects article.

由于常规CSS模糊滤镜不支持方向模糊，因此我们将不得不使用SVG滤镜。 在Creative Gooey Effects文章中，我们已经介绍了SVG滤镜的基础知识。

For this effect, we will only be using the feGaussianBlur filter primitive.

为此，我们将仅使用feGaussianBlur过滤器原语。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
	<defs>
		<filter id="blur">
			<feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />
		</filter>
	</defs>
</svg>

The stdDeviation attribute is used to set the blur intensity, and can take up to two parameters, for blur in the horizontal and vertical orientation.

stdDeviation属性用于设置模糊强度，最多可以包含两个参数，用于水平和垂直方向的模糊。

Applying the filter to an element, as we’ve seen before, is simple enough:

如前所述，将过滤器应用于元素非常简单：

.selector{
	-webkit-filter: url("#blur");
	filter: url("../index.html#blur");
}

For the motion blur effect, however, we are going to have to update the filter dynamically for every frame through JS.

但是，对于运动模糊效果，我们将不得不通过JS为每帧动态更新滤镜。

First we will have to select and store the filter in a variable so that we can access it later. Since jQuery doesn’t play well with SVG elements, we need to select the element using native JS functions:

首先，我们必须选择过滤器并将其存储在变量中，以便以后可以访问它。 由于jQuery不适用于SVG元素，因此我们需要使用本机JS函数选择元素：

var filters = document.querySelector(".filters"), // the SVG that contains the filters
	defs = filters.querySelector("defs"), // the
   
   
    
     element inside the SVG
	blur = defs.querySelector("#blur"), // the blur filter
	blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

   
   

Setting the intensity then, is just a matter of changing the stdDeviation attribute of the filter primitive. For example, to set a horizontal 12px blur:

然后，设置强度仅是更改滤镜基元的stdDeviation属性的问题。 例如，要设置水平的12px模糊：

blurFilter.setAttribute("stdDeviation","12,0");

Keep in mind that this blur filter only supports directional blur on either the X or the Y direction, and not on any arbitrary angle, so you should plan your animations accordingly.

请记住，此模糊滤镜仅支持X或Y方向的方向性模糊，而不支持任意角度，因此应相应地计划动画。

Note though, that changing the blur filter affects all objects linked to it, so we need a new <filter> element for each object we want to apply this effect to. Here is a simple way of creating these filters dynamically:

但是请注意，更改模糊滤镜会影响与其链接的所有对象，因此，对于要应用此效果的每个对象，我们都需要一个新的<filter>元素。 这是一种动态创建这些过滤器的简单方法：

// go through all the objects that need a blur filter
$(".js-blur").each(function(i){
	// clone the filter
	var blurClone=blur.cloneNode(true);

	// create and set a new ID so we can use the filter through CSS
	var blurId="blur"+i;
	blurClone.setAttribute("id",blurId);

	defs.appendChild(blurClone);

	// set the CSS
	var filter="url(#"+blurId+")";
	$(this)
		.css({
			webkitFilter:filter,
			filter:filter
		})
		// store the filter reference on the object for practicity
		.data("blur",blurClone)
	;
});

测量速度(Measuring the speed)

For the next step, we need to be able to calculate, how far the object has moved since the last frame. We need to do this for every frame. The method for achieving this might vary according to how everything is set up; how the animation is done, etc. In this tutorial, we’ll take a more generalist approach, which, while it might not be optimized for all use cases, should work with most JS and CSS animations.

对于下一步，我们需要能够计算出自上一帧以来对象已移动了多远。 我们需要对每个帧进行此操作。 实现此目标的方法可能会根据所有设置的方式而有所不同。 如何制作动画，等等。在本教程中，我们将采用一种更通用的方法，尽管可能无法针对所有用例进行优化，但该方法应适用于大多数JS和CSS动画。

To get the position, we’ll be using jQuery’s offset function, which is just what we need: it returns the element’s coordinates relative to the document (rather than its parent), and takes the transform property into account.

为了获得位置，我们将使用jQuery的offset函数，这正是我们所需要的：它返回元素相对于文档(而不是其父文档)的坐标，并考虑了transform属性。

To be able to check for changes and update every frame, we’ll use requestAnimationFrame.

为了能够检查更改并更新每一帧，我们将使用requestAnimationFrame 。

Here’s an example:

这是一个例子：

// the element we want to apply the effect
var $element=$(".selector");
// storing the last position, to be able to measure changes
var lastPos=$element.offset();
// a multiplier, to be able to control the intensity of the effect
var multiplier=0.25;

// a helper to simplify setting the blur. 
function setBlur(x,y){
	blurFilter.setAttribute("stdDeviation",x+","+y);	
}

(function updateMotionBlur(){
	// get the current position of the element
	var currentPos=$element.offset();

	// calculate the changes from the last frame and apply the multiplier
	var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
	var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;

	// set the blur
	setBlur(xDiff,yDiff);

	// store current position for the next frame
	lastPos=currentPos;

	// call to update in the next frame
	requestAnimationFrame(updateMotionBlur);
})();

And here is the result:

结果如下：

This is the basic approach which takes only one element into consideration. A more complicated use might require code optimized for it in particular. For a more sophisticated take, you may look into applying the motion blur effect to multiple objects, disabling the blur and the speed calculation when there’s no animation, and so on.

这是仅考虑一个要素的基本方法。 更复杂的使用可能需要特别对其进行优化的代码。 对于更复杂的情况，您可以考虑将运动模糊效果应用于多个对象，在没有动画时禁用模糊和速度计算，等等。

And we’re done here! Again, with all things filter, please be aware that this effect can be resource intensive, so you should refrain from using it on large objects.

我们在这里完成了！ 同样，使用所有内容过滤器时，请注意，这种效果可能会占用大量资源，因此您应避免在大型对象上使用它。

翻译自: https://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/

svg模糊