Як оживити сайт за допомогою процедурної анімації

Всім привіт! Сьогодні хочу на маленькому прикладі поділитися знаннями і показати, як можна оживити сайт за допомогою процедурної анімації, не перевантажуючи сторінку важкими відео, GIF-анімаціями чи великою кількістю готових графічних матеріалів. І головне — покажу це не на абстрактному квадраті, який просто рухається по екрану, а на трохи цікавішому прикладі. Але спочатку хочу розповісти, звідки взагалі взявся мій інтерес до таких речей.

З чого все почалося

Коли я ще навчалась, мені якось трапився на очі дуже незвичний сайт. Він був схожий на маленьку 2D-гру: по сторінці бігав персонаж, щось робив, взаємодіяв із навколишніми елементами. Я була в захваті від побаченого. На той момент я навіть не думала, що подібні речі можна створювати просто за допомогою коду. Для мене це виглядало майже як маленька магія. Саме тоді мене й зацікавила ця ідея: а що, якщо сайт може бути не просто набором блоків, тексту та картинок, а маленьким живим середовищем? Зараз багато сайтів будуються за досить знайомим сценарієм. Один блок плавно змінює інший, шторка виїжджає збоку, текст з’являється під час прокручування, картинка трохи рухається за курсором. Колись такі ефекти справді здавалися незвичайними. Сьогодні вони вже настільки поширені, що ми часто навіть перестаємо їх помічати. І нещодавно я натрапила на сайт, який знову змусив мене зупинитися. Там було лише два елементи — голова змії та один елемент її тіла. Вони рухалися за заданою математичною функцією, створюючи відчуття цілісного руху змії. І я подумала: «О, так це ж вона — процедурна анімація!» І ось це вже було цікаво. Тому що тут не потрібно створювати сотні готових кадрів руху. Можна задати правила, за якими об’єкти повинні поводитися, а далі браузер сам розраховує їхнє положення. Мені сподобалась ця ідея саме через її незвичність. Це не просто черговий ефект, який зараз модно додавати на сайти. Це можливість створити щось своє.

Що таке процедурна анімація?

Якщо дуже просто — це анімація, яка не зберігається у вигляді готового відео. Ми задаємо правила: ось форма; ось її розміри; ось напрямок руху; ось швидкість; ось що має відбуватися на кожному кроці. А далі браузер виконує ці правила і сам створює рух.

Щоб це було зрозуміліше, я зробила невеликий приклад із 3D-принтером.

Уявімо, що сопло принтера друкує листок. Спочатку є тільки його форма. JavaScript «сканує» її горизонтальними лініями, визначає, де починається і закінчується кожна ділянка, і створює послідовність ліній. Потім ці лінії по черзі «друкуються», а сопло рухається за ними. У результаті ми отримуємо ось таку анімацію сайту:

Інтерактивна анімація листка, який друкується.

Тобто ми не записували відео того, як принтер друкує листок. Ми описали правила, за якими цей процес має відбуватися. І браузер створює його прямо під час роботи сторінки.

Чим це відрізняється від звичайної анімації?

Уявімо звичайну GIF-анімацію. Ви спочатку створюєте кадри: кадр 1 → кадр 2 → кадр 3 → кадр 4 → і так далі. Потім браузер просто показує їх один за одним. У процедурній анімації підхід інший. Ми можемо сказати:

«Рухайся від цієї точки до цієї зі швидкістю X».

Або:

«Знаходься на цій кривій і змінюй своє положення відповідно до заданої функції».

Або навіть:

«Кожного разу генеруй новий візерунок за цими правилами».

Тобто замість готової послідовності кадрів ми створюємо систему, яка ці кадри генерує. І саме це робить процедурну графіку такою цікавою.

Плюси такого підходу

1. Не потрібно завантажувати готове відео

Для невеликих графічних сцен замість відеофайлу можна використовувати код та геометрію. Це може бути хорошим рішенням, коли потрібно створити легку декоративну або інтерактивну анімацію без великого медіафайлу. Але тут важливо не перебільшувати. Процедурна анімація не означає нульове навантаження. Браузер все одно повинен виконувати код, розраховувати координати та промальовувати кадри. Тому правильніше сказати так: ми можемо уникнути важкого відеофайлу, але натомість отримуємо обчислення під час роботи сторінки. Чим складніша сцена — тим більше роботи отримує браузер.

2. Анімація може реагувати на користувача

І ось тут починається найцікавіше. Анімація на сайті не обов’язково повинна просто програватися від початку до кінця. Вона може реагувати на те, що робить людина. Наприклад: користувач рухає курсор — об’єкт реагує; прокручує сторінку — запускається наступний етап; натискає кнопку — змінюється поведінка сцени; змінює параметр — змінюється сама анімація. Тобто сайт може не просто показувати інформацію. Він може відповідати на дії людини. І тоді інтерактивний сайт перетворюється з простої сторінки на своєрідний досвід для користувача.

3. Можна створювати унікальні ефекти

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

Анімація як частина впізнаваності

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

«Ми створюємо якісні сайти».

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

«О, це той сайт, де прикольний дизайн».

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

Але є і мінуси

Процедурна анімація — не чарівна кнопка «зробити красиво». Її потрібно розробити Відео можна зняти. GIF можна завантажити. Готову анімацію можна купити. А процедурну анімацію потрібно придумати і запрограмувати. Іноді на створення короткої сцени може піти набагато більше часу, ніж здається на перший погляд. Тому якщо вам потрібно просто показати короткий ролик, складна анімація для сайту може бути абсолютно недоречною.

Код теж має свою ціну

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

Потрібно думати про мобільні пристрої

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

Анімація може почати заважати

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

Кому це підійде?

Процедурна анімація сайту особливо цікава для проєктів, де важлива візуальна подача.

Креативним студіям та дизайнерам Можна показати не тільки результат роботи, а й сам процес його створення.

Виробникам Показати шлях від сировини до готового продукту.

Технологічним компаніям Пояснити складний процес через просту візуальну історію.

Майстрам та невеликим локальним бізнесам Навіть звичайний сайт майстра можна зробити впізнаваним, якщо анімація пов’язана саме з його роботою.

Особистим сайтам та портфоліо Тут генеративна графіка взагалі може стати частиною самого образу людини. Не просто: «Ось моє портфоліо». А:

«Ось як я думаю, створюю і працюю».

А кому краще не використовувати?

Якщо головна мета сайту — швидко отримати інформацію, складна анімація може бути зайвою. Наприклад: новинним сайтам; довідковим ресурсам; простим інформаційним сторінкам; сайтам, де значна частина користувачів заходить зі слабких пристроїв; сторінкам, де анімація не додає жодного сенсу. І я б точно не використовувала процедурну анімацію просто тому, що «зараз модно мати анімований сайт». Спочатку має бути ідея. Потім — анімація. А не навпаки.

І це далеко не тільки про рух картинки

На цьому прикладі ми зробили досить просту річ: взяли форму листка, знайшли області всередині неї та перетворили їх на послідовність ліній. Але цей принцип можна розвивати набагато далі.

Генеративні фони Кожне завантаження сторінки може створювати трохи інший візерунок.

Інтерактивні логотипи Логотип може реагувати на рух миші або дії користувача.

Візуалізація процесів Об’єкт може збиратися, ламатися, друкуватися, будуватися або трансформуватися прямо перед очима.

Генеративні ілюстрації Сайт може сам створювати візуальні композиції за заданими правилами.

Інтерактивні 3D-сцени Користувач може не просто дивитися на модель, а взаємодіяти з нею.

І найцікавіше — все це може бути частиною самого сайту, а не окремим відео, яке просто вставили між блоками.

Як це може використовуватися у розробці сайтів?

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

«Який ефект зараз популярний?»

а з іншого:

«Що унікального є саме в цьому бізнесі, і як це можна показати через рух?»

І тоді анімація перестає бути декоративною. Вона стає частиною концепції сайту.

А чи можна зробити це без складного відео?

Так. Саме в цьому і полягає одна з переваг процедурного підходу. Ми можемо створити анімацію без відео, використовуючи SVG, JavaScript та математичні правила. Це не означає, що відео більше ніколи не потрібне. Відео залишається чудовим інструментом для багатьох задач. Але якщо нам потрібно створити просту геометричну сцену, рух об’єктів, генеративний ефект або інтерактивну графіку, немає сенсу автоматично брати відеофайл. Іноді код може бути набагато цікавішим інструментом.

То чи варто використовувати процедурну анімацію?

Я б сформулювала так: Не використовуйте процедурну анімацію, щоб просто зробити сайт красивішим.

Використовуйте її, щоб зробити сайт зрозумілішим, цікавішим або таким, що запам’ятовується.

Тоді вона перестає бути просто ефектом. Вона стає частиною досвіду користувача. І саме це, на мою думку, є найцікавішим у процедурній графіці для вебу. Ми можемо не просто намалювати щось красиве. Ми можемо задати правила — і дозволити браузеру створити з них живу сцену. А далі питання вже не в тому: «Як зробити, щоб воно рухалося?» Питання набагато цікавіше:

«Що саме ми хочемо розповісти цим рухом?»

Якщо вам потрібен не черговий шаблон

Саме такі експерименти я люблю додавати у свою розробку сайтів. У WebAnd3D я хочу створювати не просто сторінки з текстом, картинками та стандартними ефектами, а сайти, які мають власний характер. Якщо ви плануєте замовити сайт і не хочете отримати черговий шаблон із типовими анімаціями, іноді варто почати не з готового дизайну, а з ідеї. Що може рухатися? Що може реагувати? Що можна показати замість того, щоб просто написати про це текстом? І, можливо, саме з цього питання почнеться ваш сайт.

WebAnd3D — сайти, які не обов’язково повинні бути схожими на всі інші.