Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

327

Від автора: минулого тижня ми з вами говорили про ZorroSVG, інструмент, з допомогою якого можна конвертувати важкі прозорі PNG-32 легкі і гнучкі файли SVG. І це змусило мене замислитися. Парою тижнів раніше я розповідав про ефект Ken Burns в кінематографі і телебаченні.

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 1: Паралакс ефект Ken Burns

Є й інша схожа, але трохи специфічна техніка, з допомогою якої можна створити панораму та/або збільшувати різні верстви фотографії при різних швидкостях, створюючи ефект 3D. Іноді цей ефект називають «Паралакс ефект Ken Burns », «З 2D в 3D ефект» або «Ефект 2.5 D». Ви можете називати це «ефектом з історичного каналу», також легко це може бути «VH1: Behind the Music effect».

Класичний трюк відеооператорів. Усі уроки на YouTube, які ви зможете знайти, будуть ставитися до користувачам Adobe After Effects.

А якщо б ми могли імітувати цей ефект повністю в незалежній SVG графіку? Такий був план. Метод працював трохи не так, але, я думаю, дуже корисно поділитися тим, що у мене вийшло. Будемо чесними: даний підхід швидше відправна точка, ніж готовий продукт. І я знаю, що він не працює в Opera 3. Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Я не буду включати в статтю весь код, але щоб зрозуміти принцип роботи, вам доведеться переглянути його на CodePen. Я планував…

Розбити фотографію на три накладених один на одного шару – передній, середній і задній.

Конвертувати шари в SVG з допомогою ZorroSVG.

Вручну зібрати ці шари в один багатошаровий SVG.

Анімувати SVG за допомогою CSS-анімації для створення ефекту Parallax-Burns.

Перший підхід. Фотограф

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 2: архівне фото Вудро Вільсона

Перше завдання було знайти гарне фото. І я знайшов чудову безкоштовну фотографію Вудро Вільсона на сайті Flickr. У фото хороший ефект глибини.

Я відкрив фотографію в Photoshop і усунув пошкодження в нижній половині, а потім розрізав його на три окремих шару (все в PNG-32).

Передній: Загородження

Середній: Вільсон і VIP персони

Задній: Решта трибун

Так як ми збираємося рухати ці шари один відносно одного, необхідно створити додаткове зображення для заповнення порожніх областей. Щоб клонувати нове зображення за парканом і самим Вільсоном з його компанією я використовував заливання з урахуванням вмісту в Photoshop. Досить грубий підхід, але нічого страшного.

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

У нас є розкадровка наших компонентів зображення.

SVG розмітка

На CodePen можна писати SVG розмітку прямо у вкладці HTML. Тут можна погратися з SVG і придумати що-небудь. Розглянемо мій перший тест:

У демо видно, що шар з загородженням рухається швидше середнього шару, так як він розташований ближче до нас. В цьому полягає ключова особливість паралакс ефекту. В SVG є два способи вставити в файл піксельні зображення, і вони зовсім не відрізняються від HTML.

Метод 1: Закодувати і вставити растрові зображення

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 3: Прев’ю закодованого зображення

На малюнку видно, що зображення, закодоване за допомогою base-64 кодування. Алгоритм перетворює растрові зображення в рядок цифр і символів, які можна просто вставити в SVG через будь-який текстовий редактор. ZorroSVG робить те ж саме – якщо відкрити ZorroSVG файл у текстовому редакторі, ви побачите щось схоже на малюнок 3.

З закодованим зображенням трохи незручно працювати, але сама можливість инкапсулировать все в один файл варто того. Нічого не зламається, якщо ви завантажите файл, перемістити в іншу папку, або у вас потрапить інтернет з’єднання.

Метод 2: Вказати зображення через URL

Як і в HTML, в SVG також можна посилатися на сторонні зображення:

Досить акуратний і легкий спосіб, але якщо зображення яким-небудь чином перемістити в іншу папку, в SVG з’явиться повідомлення «Немає зображення». Не сама хороша ідея. Тим не менш, в демо вище я саме так і вчинив. Три елемента image розташовані в порядку від далекого шару до самого переднього. Кожному шару були задані осмислені класи .front, .mid і .back. Не буду пояснювати весь код, тільки основне:

У самому верху SVG у тезі STYLE написані дві найпростіші анімації масштабування — parallax-front і parallax-mid.

Щоб збільшити глибину зображення я додав в SVG ефект розмиття на передній і задній шари (filter:url(#effect-1);), а шар з самим Вільсоном залишив без змін. В ідеалі, я хотів би повільно змінювати ефект розмиття із збільшенням шару, щоб підвищити ефект 3D. Але не в цьому демо.

Властивість transform-origin зі значенням 50% 50% означає збільшення шару точно в центр зображення. Значення 50% 100% створить ефект того, що ми рухаємося на Вільсона і трохи під нього. А значення 50% 0 створить ефект, ніби ми робимо зум над його головою.

Просто як тест, даний метод досить непоганий. З’являється відчуття часу і простору, чого немає на звичайному фото. Але з іншого боку SVG повністю залежить від зовнішніх файлів, які не завжди можуть бути доступні. Буде набагато надійніше, якщо ми поєднаємо всі в один незалежний файл.

Другий підхід

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 4: Прев’ю закодованого зображення

Якщо пропустити наші три файлу PNG через ZorroSVG, на виході ми отримаємо три нових SVG-файл, який можна відкрити через будь-редактор. Я відкрив одне зображення в Adobe Brackets і навів на його код курсор, результат видно на рисунку 4.

Ви помітите, що ZorroSVG поміщає зображення у верхню половину, а в нижній половині кодує альфа-канал (маску). Тег filter трохи вище автоматично застосовує маску.

Якщо пропустити всі PNG файли через Zorro, то фільтр вгорі буде точно такий же. І… якщо ми вручну відредагуємо ці три закодованих тега image в один SVG-файл, то шари повинні стати як по маслу, так адже?

І так воно і є! SVG зображення з трьома накладеними один на одного шарами буде того ж розміру, що і оригінальний плоский PNG.

Потім можна додати ті ж самі CSS класи і анімацію у файл і все! У нас повинен вийти ефект Parallax Burns в незалежному файлі SVG.

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 5: Олімпійські ігри в Лондоні – 1948 – футбол

Так воно й виходить, але з деякими застереженнями… Але все ж метод працює. На рисунку 5 подано SVG-файл, який можна завантажити на локальний комп’ютер або на сайті, переслати по електронній пошті.

Проблеми?

Якщо відкрити файл вище в Chrome або Safari, анімація буде бігати і стрибати, а не плавно ковзати, як в демо PNG файлами на сайті CodePen.

З іншого боку, якщо відкрити файл в Firefox (я вам раджу), ви побачите дуже плавну анімацію. Коли справа стосується маніпуляцій з SVG, Firefox немає рівних.

Чесно кажучи, SVG приклад вище набагато більшого дозволу, чим мені було потрібно, але я хотів дещо браузери. Firefox навіть не спітнів. Так як це альфа, я не тестував демо IE11. Але буду радий, якщо люди відчують його в цьому браузері.

Загалом, SVG може інтерпретувати більшість CSS стилів, але є невеликі сумніви, що він працює зі стилями не так добре, як HTML в браузерах. Наприклад:

SVG не вміє обробляти 3D анімацію CSS (перетворює її в 2D)

CSS-анімація в SVG не така плавна і надійна (за винятком Firefox). З простими завданнями SVG цілком справляється, але не спокушайте долю.

Заключні думки

Може бути, проблему з плавність анімації можна просто пофіксити.

Може, варто погратися з роздільною здатністю зображення?

Можна скористатися вбудованим синтаксисом SVG анімації SMIL.

Може бути, краще використовувати SVG clip-path як маску, а не фільтр альфа-каналу, як ми.

Я пошукав різні варіанти всього пару днів, так що є ще багато недосліджених можливостей, з якими необхідно експериментувати.

Тим не менш, я думаю, що даний ефект займе гідне місце у веб-дизайні, якщо ми зможемо вирішити технічну сторону питання. Я бачив як ця техніка була вдало застосована на слайдері зображень – кожне зображення повільно масштабується до тих пір, поки не зникне з екрана.

У будь-якому випадку, варто поекспериментувати з демо і дайте мені знати, якщо ви зробите які-небудь поліпшення.

Оновлення від 11 березня 2016

Ефект Parallax-Burns: як конвертувати фотографії з 2D в 3D за допомогою SVG

Малюнок 6: Parallax Burns ефект з clip-path як маски

У даній статті я говорив, що SVG clip-path може бути більш ефективним та продуктивним чином, ніж фільтр альфа-каналу, який ми використовували в прикладах. Радий вам повідомити, що я швидко провів тести, і все працює.

На рисунку 6 ви бачите незалежний SVG-файл розмірів 245Кб. Натуральний розмір 965px х 664px, а його анімація набагато плавніше, ніж в оригінальній версії.

Векторна маска на файлах JPEG виходить більш чіткої і меншого якості, але це не перешкода (Я можу точно вирізати маску). Також я застосував фільтр розмиття до загорожі після маски clip-path, так що його краю расфокусировались.