Динамічні шпалери у tTravel | Головний екран, що змінюється з часом

Продовжуємо серію історій про новий tTravel — застосунок, що народився з пристрасті та витримки.

Ми перетворили головний екран застосунку на живий всесвіт, який змінюється протягом дня. Це стало однією з найартистичніших функцій у tTravel, і в цій статті ми розповімо, як саме ми її реалізували.

За останній рік лише 6% користувачів tTravel змінювали шпалери — більшість навіть не знала про таку можливість, адже ми не показували її прямо. Тож ми замислилися: як дати користувачам невеликий поштовх, але не зіпсувати відчуття «пасхалки»?

Щоб розв’язати цю задачу, ми об’єдналися з Любою Сиротюк, талановитою аніматоркою в Rive, з якою познайомилися на Web Summit у Лісабоні.

Під час брейншторму ми мали два варіанти:

1. Світіння по краях шпалер. Натхнення — гало-ефект із гри Journey.

2. Пташка, що пролітає через головний екран застосунку — щось, що викликає цікавість і спонукає «зловити» її дотиком до екрана. При натисканні шпалери змінюються.

Ми обрали пташку й вирішили оживити статичні шпалери, перетворивши їх на всесвіти з рухом і часом.

Спершу Люба розширила дизайн старих шпалер у сім нових всесвітів і зробила кольорокорекцію, аби вони гармонійно поєднувалися з палітрою застосунку.

У файлі Illustrator вона створила варіації для різного часу доби, щоб утворити повний цикл день–ніч. Відкрийте застосунок вранці — і ви побачите сонячний пейзаж. Зайдіть увечері — і перед вами сяючий захід сонця чи зоряне небо.

Крім того, Люба додала паралакс-ефект, який реагує на нахили телефону, і рухомі елементи — хмари, метеори та інші деталі, що привертають увагу.

Нарешті, ми прагнули до плавних багатошарових переходів. Тепер замість різкої зміни картинок елементи м’яко затухають і переміщуються.

Виклики в анімації

Ось нотатки Люби про її роботу та труднощі, з якими вона зіткнулася:

Одним із головних викликів було не стільки створити сам паралакс, скільки організувати плавні переходи між двома параметрами для кожного всесвіту: часом доби та зміною самого всесвіту.
Ми прагнули ефекту, коли один елемент непомітно замінює інший. Спершу я перенесла все з Illustrator у Rive, налаштувала кольори, градієнти й простий ефект панорамування.
Далі налаштувала паралакс і відшліфувала кольори, після чого зосередилася на переходах.
Спершу я будувала анімації як окремі шари, з простими тригерами для зміни станів. Планувалося використати два цифрові тригери: один для зміни всесвіту, другий — для часу доби (який автоматично змінюється впродовж 24 годин). Але після тестів стало зрозуміло: потрібні тригери для кожного всесвіту та кожного часу доби, щоб розробники мали більше контролю.
Я протестувала різні робочі механізми. Щоб поліпшити переходи, я додала шари з анімаціями входу/виходу для кожного всесвіту. Так зміни виглядали плавніше, але ще не ідеально.
Після кількох ітерацій стало зрозуміло: найкраще переходи виглядають, коли для кожного стану створені власні анімації входу та виходу. Я збудувала матрицю для часу доби та матрицю для всесвітів, з окремими станами для кожного.
Тоді все запрацювало, як я й задумувала. Я відрегулювала таймінг, уповільнила деякі ділянки й додала паузи. У результаті вийшов плавний паралакс-ефект. У Rive він виглядав відполірованим, а в реальному застосунку ще краще — головний екран перетворився на маленький інтерактивний світ, що реагує на вас і на час доби.

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

Висновок

Ми не очікуємо, що ця функція суттєво підвищить метрики, але хочемо, щоб наш застосунок був занурювальним, креативним і просто красивим. Ця «пасхалка» зі шпалерами — це спосіб віддячити тим користувачам, які досліджують tTravel і відкривають усі його секрети. Зрештою, справа не завжди у цифрах — іноді вона у нашій любові до tTravel. Для нас кожен екран у застосунку має виглядати як маленький витвір мистецтва.