Для початку розберімося, що ж таке розмиття об'єктів у русі (або motion blur), аби краще розуміти, що саме ми намагаємося відтворити. Певно, ви бачили світлини, зняті за умов слабкого освітлення, де рухомі об'єкти мають вигляд розмитих смуг. Або, наприклад, камера різко рухалась і все зображення попливло. Це і є тим ефектом розмиття, який, зазвичай, є випадковим.
Розмиття у русі 101
Уявіть собі камеру. Вона має затвор — такі собі двері, які відчиняються, щоб проникло світло, а потім зачиняються, щоб його не пускати. З моменту відчинення й до зачинення — це одна фотографія, або один кадр рухомого зображення.
Якщо суб'єкт в кадрі рухається, коли затвор відчинено, ми сфотографуємо об'єкт, який рухається через кадр. На плівці об'єкт буде розмазаним, оскільки є незліченна кількість положень між його початковою та кінцевою точками. Рухомий об'єкт також стає напівпрозорими, тож крізь нього буде проглядатися частина тла.
Для отримання схожого ефекту на комп'ютері потрібно об'єднати кілька субкадрів у один та налаштувати непрозорість. Поєднаємо багато копій одного об'єкта, який перебуває у різних позиціях під час руху, — і так створимо досить переконливу імітацію розмиття в русі.
У відеоредакторах зазвичай можна налаштувати кількість субкадрів для ефекту розмивання у русі. Якщо кадрів мало, ви зможете докладно роздивитися, як працює ця техніка. Наприклад, візьмемо цей кадр анімації з чотирьох копій простого білого кола на кадр:
Кількість копій, необхідних для переконливого розмиття в русі, цілком залежить від вмісту. Якщо це щось маленьке з гострими краями й рухається надзвичайно швидко, потрібно багато субкадрів; а для чогось розмитого, що рухається повільно, вистачить і кількох. Загалом чим більше субкадрів — тим переконливіший ефект.
Повторимо це у CSS
Щоб відтворити цей ефект за допомогою CSS, нам потрібно створити багато однакових елементів, зробити їх напівпрозорими та втиснути цю анімацію у долю секунди.
Найперше ми створимо базу для анімації, застосувавши перетворення CSS (transitions). Використаємо просту чорну крапку і призначимо їй перетворення під час наведення (або торкання, для мобільних телефонів). Ми також анімуємо межі окружності та зміну кольору, щоб продемонструвати гнучкість цього підходу.
Так виглядатиме базова анімація без ефекту розмиття:
Тепер створімо 20 однакових копій чорної крапки та розмістимо їх чітко на тому ж місці за допомогою абсолютного позиціювання. Кожна копія має 10% непрозорості: можливо, математично це не надто правильно, але так анімація буде переконливішою.
І ось тепер починаємо чаклувати. Збільшимо затримку перетворення для кожної копії нашої крапки. Усі вони анімуватимуться однаково, але матимуть затримку у три мілісекунди кожна.
Перевагою такого підходу буде ефект псевдорухового розмиття, який працює для безлічі різних анімацій. Ми можемо додати зміни кольору, масштабування перетворень, непарних таймінгів, а ефект розмивання у русі все одно працюватиме.
Для більшості швидких і повільних анімацій вистачить 20 клонів об'єктів. Та навіть з меншою кількістю можна досягти переконливого розмиття у русі. Для кожної анімації варто індивідуально добирати кількість клонованих об'єктів, налаштовувати непрозорість та тривалість затримки перетворення. У нашому прикладі ефект розмиття злегка пришвидшено, щоб зробити його помітнішим.
Сподіваємося, що з розвитком потужності комп'ютерів основні браузери додадуть цей ефект до своєї функціональності. Тоді ми зможемо позбутися безглуздого створення 20 однакових об'єктів. Але на сьогодні це досить прийнятний спосіб зробити розмиття у русі достатньо реалістичним.
Ще немає коментарів