Ефект Motion Blur за допомогою SVG
Сьогодні ми розглянемо, як створити ефект motion blur та застосувати його до анімацій CSS за допомогою SVG.
?Подивитися на GitHub?Демо (рус.)Motion blur — це технологія, що широко використовується в анімаційному дизайні та анімації взагалі, щоб надати руху більш м'який і природний вигляд.Motion blur(вимовляється:моушн блер) — розмиття зображення під час відтворення сцен руху або об'єктів, що швидко рухаються.
— Motion blur на Вікіпедії У цій статті ми розглянемо, як можна відтворити цей ефект для горизонтальних та вертикальних переміщень.
Увага: Будь ласка, майте на увазі, що цей проект несе надзвичайноекспериментальнийхарактер і підтримується лише деякими сучасними браузерами. На даний момент Chrome показує найкращі результати.
Щоб застосувати ефект motion blur, потрібно нанести розмиття по горизонталі на об'єкт відповідно до його швидкості та напрямку, для кожного кадру окремо.
Встановлюємо розмиття
Оскільки стандартний фільтр розмиття CSS не підтримує розмиття в певному напрямку, ми будемо використовувати фільтри SVG.
Для бажаного результату ми будемо використовувати лише фільтрfeGaussianBlur.
ПараметрstdDeviation використовується для встановлення інтенсивності розмиття та може приймати два значення, одне для горизонтального, інше для вертикального розмиття.
Застосувати фільтр до потрібного елемента досить просто:
Однак, нам необхідно змінювати значення параметра кожного кадру. Зробити це можна за допомогою JS.
Для початку нам потрібно вибрати і помістити фільтр в змінну, щоб ми могли звернутися до нього пізніше. Так як jQuery не дуже дружитьз елементами SVG, ми будемо використовувати стандартні функції JS:
Змінювати інтенсивність потрібно за допомогою коригування значень параметраstdDeviation. Наприклад, розмиття по горизонталі в 12px:
Так як даний фільтр підтримує тільки розмиття в двох напрямках, осі X і осі Y, то потрібно планувати анімацію заздалегідь.
Зауважте, що зміна значення фільтра стосується всіх об'єктів, з якими він пов'язаний. Тому потрібно створити новий елемент для кожного нового об'єкта, до якого ми хочемо застосувати фільтр. Ось простий спосіб, як можна динамічно створити ці фільтри:
Вимірюємо швидкість
Тепер нам потрібно розрахувати, як далеко об'єкт перемістився порівняно з останнім його положенням. Це потрібно зробити для кожного кадру. Спосіб реалізації безпосередньо залежить від того, як все налаштовано, як виконано анімацію тощо. У нашому уроці ми використовуємо найбільш загальний підхід, який працюватиме з більшістю CSS-анімацій.
Щоб отримати положення об'єкта, ми будемо використовувати функцію jQueryoffset. Вона повертає координати об'єкта щодо всього документа.
Щоб перевіряти зміни кожного кадру, будемо використовуватиrequestAnimationFrame.
І ось наш результат:
Це базовий підхід для застосування ефекту лише до одного елемента. Під кожен випадок необхідно оптимізувати код окремо.
Ну от і все! Зверніть увагу, що цей ефект вимагає досить багато пам'яті, тому не варто застосовувати його для великих об'єктів.
Від перекладача.З усіма побажаннями та зауваженнями з приводу перекладу прошу звертатися до мене в особу. Дякую!
Ви можете допомогти і перевести небагато коштів на розвиток сайту