Orbit: як це зроблено
Orbit — застосунок із гейміфікацією: місії-планети на нічному небі, кільця прогресу, серія днів, нагороди й кроки місій, що виконуються просто на сторінці. Ця сторінка показує, де в редакторі живе кожен його прийом і як повторити його на власному екрані.
Orbit ви отримуєте, скопіювавши його з галереї готових застосунків (Початок роботи). Відкрийте документ, виділіть віджет на полотні й знайдіть його в розділі Дерево за назвою нижче; назви в коді — це назви, які ви бачите в дереві.
Екрани#
| Екран | Що це | Куди веде |
|---|---|---|
Home |
Стартовий екран: баланс, кільце рівня, серія, три місії, остання активність | До місій, історії, рівнів, шару серії, сповіщень і профілю |
Missions |
Місії у трьох вкладках: активні, нові, виконані | До Mission details; довге натискання відкриває Mission peek |
Mission details |
Одна місія з її кроками | Назад; кроки виконуються на сторінці |
Rewards |
Нагороди з плашками категорій | До Reward details; довге натискання відкриває Redeem |
Reward details |
Нагорода й «провести, щоб обміняти» | До Success |
Success |
Код обміну й дорога назад | До Rewards |
Orbit level, Orbit levels |
Кільце рівня й список рівнів | Назад |
Stardust history, Notifications, Profile |
Списки й налаштування | Назад |
Mission peek, Streak, Redeem |
Шари поверх інших екранів | Закриваються кнопкою або потягом униз |
Чотири розділи нижньої панелі — Home, Missions, Rewards і Orbit level.
Як зроблено картку балансу#
На Home виділіть Stardust balance card. Число й кільце в ній ростуть від нуля, коли екран відкрито, і доліковують до нового значення, коли міняються дані.
- Баланс — Текст у режимі Прив’язка з полем даних
user.balance, показаний як Число з роздільниками. - На тексті й на кільці ввімкнено Рости від нуля, коли показано та Плавно, коли дані змінюються.
- Кільце — Кільце прогресу, прив’язане до
user.tierProgress. Його Градієнт заповнення —aurora, Кінці — Заокруглені, Сяйво — М’яке, а підпис у центрі — окремий текст із шаблоном.
Щоб повторити: додайте Кільце прогресу, прив’яжіть Поточне значення до поля, увімкніть два перемикачі анімації, оберіть градієнт і задайте Кінці та Сяйво. Потім змініть сценарій над полотном і подивіться в прев’ю, як воно рахує.
Як зроблено смугу кроків#
Mission card показує смугу кроків. У віджета Смуга прогресу кількість Кроки стала, а місії бувають із двома, трьома, чотирма, п’ятьма чи десятьма кроками. Тому картка тримає п’ять смуг, кожна зі своїми Кроки, і кожну показано За умовою: поле даних mission.steps дорівнює її числу. Заповнену частину прив’язано до mission.stepsDone.
Щоб повторити: додайте смугу, задайте Кроки, прив’яжіть Поточне значення й скопіюйте смугу для кожного розміру; кожній копії дайте власну умову в розділі Видимість. Сяйво зі значенням Яскраве підсвічує поточний крок.
Як зроблено «провести, щоб обміняти»#
На Redeem і Reward details виділіть Swipe to redeem. Це звичайна Кнопка, у якої Підтвердження — Провести, щоб підтвердити: дія спрацює, лише коли повзунок дійде до кінця. Кнопка Вимкнена, якщо… поле даних reward.affordable вимкнено, тож людина без потрібних балів не проведе. Шар Redeem — це Аркуш знизу з Розмиття під шаром (Як відкривається: Шаром поверх).
Щоб повторити: виділіть кнопку, задайте Підтвердження, оберіть її дію, а в Вимкнена, якщо… — умову. Повзунок перевіряйте у вкладці Прев’ю: полотно показує його в спокої.
Як зроблено довге натискання#
На Missions виділіть Mission card. У розділі Довге натискання є Дія при довгому натисканні: Перейти на екран Mission peek — маленьке вікно посередині (Місце шару: Вікно в центрі). Звичайне натискання відкриває Mission details. Обидві дії несуть запис картки, тож відкритий екран показує саме цю місію. Назва дії довгого натискання обов’язкова.
Щоб повторити: виділіть натискну картку, відкрийте Довге натискання, оберіть дію й напишіть її назву. Кнопка довгого натискання не має.
Як зроблено серію#
На Home у Streak card лежить Streak week: сім колонок. У кожній кружок має запис у Стани: коли user.day1 (і далі) увімкнено, кружок заповнений. День сьогодні — друга іконка, яку показано За умовою за user.todayIndex, і в неї Рух — Дихання, тож вона пульсує. Саме на картці є Дія при довгому натисканні, і вона лише для демо: переходить на наступний день.
Щоб повторити: намалюйте один день, дайте йому запис у Стани на полі «так/ні» й скопіюйте сім разів з іншими полями.
Як зроблено нижню панель#
Bottom navigation — Панель навігації з Пливе над умістом, тож уміст гортається під нею, а останній рядок однаково догортається над нею. Пункт Missions має Крапка, коли user.newCount більше нуля. Кожен пункт має Перейти в розділ і Екран розділу. Така сама панель стоїть на кожному екрані-розділі; змінивши пункти, покладіть панель на Решта розділів ще раз.
Привітання, що лишається#
Перший рядок на Home, Greeting row, має Прибито до верху зі значенням Прибито: він стоїть під шапкою, поки вміст гортається. М’які кола за ним — чотири контейнери з Рух — Плавання і різними Цикл, мс та Затримка, мс, тож вони пливуть не в унісон.
Дані#
Orbit читає поля user.* (баланс, рівень, серія, дні тижня), challenge.*, history.* і ui.*, а також списки missions, newMissions, doneMissions, steps, rewards, featuredRewards, history, newNotifications, earlierNotifications і tiers. Поля ui.* тримають те, що людина обрала на екрані: вкладку місій, категорію нагород, вид записів історії.
Над полотном відкрийте список Сценарій. Оберіть Налаштувати значення… і задайте user.checkedInToday, user.newCount чи списку newMissions значення Порожній: крапка на панелі, кнопка на картці серії й порожній стан Missions зміняться. Усі стани показують їх поруч. Докладніше про сценарії: Дані.