Создание эффекта скольжения

Привет! Сегодня мы покажем вам, как сделать эффект скольжения при движении объектов. "Смазывание" является широко используемым методом в анимации, используют его для того, чтобы сделать движение более гладким и естественным. Имейте в виду, что этот эффект является экспериментальным и поддерживается только новыми версиями современных браузеров.

Приступим!

Устанавливаем размытость...

Поскольку CSS не поддерживает направленного размывания, мы использовать SVG фильтры, а именно 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>

Атрибут stdDeviation используется для установки интенсивности размывания, и может иметь два параметра, для размытия в горизонтальной и вертикальной плоскостях. Применить фильтр к элементу достаточно просто:

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

Для эффекта размытия движения мы будем обновлять динамический фильтр для каждого кадра при помощи JS. Во-первых, придется выбрать и хранить фильтр в переменной, чтобы позже получить к нему доступ. Так как JQuery не очень хорошо работает с SVG элементами, будем выбирать элементы с помощью собственных функций JS:

var filters = document.querySelector(".filters"), // стучимся к фильтрам
	defs = filters.querySelector("defs"), // элемент SVG
	blur = defs.querySelector("#blur"), // фильтр "Размытие" 
	blurFilter = blur.firstElementChild; // SVG-фильтр feGaussianBlur

Устанавливаем интенсивность горизонтального размытия, изменив первый параметр атрибута stdDeviation:

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

Важно помнить, что изменение фильтра размытия влияет на все объекты, связанные с ним, так что нам нужен новый элемент <filter> для каждого объекта, к которому мы хотим применить этот эффект.

Вот простой способ динамического создания этих фильтров:

$(".js-blur").each(function(i){
	var blurClone=blur.cloneNode(true);
	var blurId="blur"+i;
	blurClone.setAttribute("id",blurId);
	defs.appendChild(blurClone);
	var filter="url(#"+blurId+")";
	$(this)
		.css({
			webkitFilter:filter,
			filter:filter
		})
		.data("blur",blurClone)
	;
});

Для следующего шага мы должны рассчитать насколько далеко переместился объект с последнего кадра. Это надо сделать для каждого кадра. Чтобы получить позицию, мы будем использовать JQuery-функцию offset, она возвращает координаты элемента относительно документа (а не его родителя), и принимает свойство transform при расчете. Чтобы иметь возможность проверить изменения и обновить каждый кадр, будем использовать requestAnimationFrame.

// элемент, к которому хотим применить эффект
var $element=$(".selector");
// запоминаем последнюю позицию
var lastPos=$element.offset();
var multiplier=0.25;

// помощь в упрощении настройки размытия
function setBlur(x,y){
	blurFilter.setAttribute("stdDeviation",x+","+y);	
}

(function updateMotionBlur(){
	// получаем текущую позицию элемента
	var currentPos=$element.offset();

	// рассчитываем изменения последнего фрейма
	var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
	var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;

	// устанавливаем размытие
	setBlur(xDiff,yDiff);

	// запоминаем текущую позицию для следующего фрейма
	lastPos=currentPos;

	// применение обновлений в следующем фрейме
	requestAnimationFrame(updateMotionBlur);
})();

Ну вот и все! Только запомните, что этот эффект достаточно ресурсоемкий, так что просьба пока воздержаться от использования его на крупных объектах. До скорых встреч на страницах roothelp.ru :)