UIСередній

Juicy Progress Bar

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

uiprogressxprewardmobile

Приклади

Записано з інтерактивного демо нижче на цій сторінці.

Огляд

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

Левел-ап — це кульмінація, і вона заслуговує на хореографію: смуга заповнюється по вінця, тримає біт, вибухає (спалах, частинки, поп на значку рівня), а тоді перекочується й продовжує з залишком. Ніколи не ковтайте залишок — якщо нагорода дає 120% рівня, смуга мусить видимо перекрутитися й піти далі, інакше гравець почувається обрахованим.

Це робоча конячка мобільних мета-екранів і playable ads: смуги XP, треки бойових перепусток, лічильники колекцій. Дві правила таймінгу тримають її чесною: анімуйте фіксовану тривалість (300–600 мс), а не фіксовану швидкість, щоб великі прирости не тяглися десять секунд; і ставте швидкі прирости в чергу одним безперервним сплеском замість перезапуску твіну на кожній події.

Інтерактивне демо

кожен тап дає сплеск заповнення — перелив вибухає, перекочується і зберігає залишок

XP за тап35%

Час заповнення400ms

Де застосовується

Смуги XP та рівнів на мобільних мета-екранахТреки бойових перепусток і квестівЛічильники колекцій та прокачкиПідсумки забігу в playable ads

Найкращі практики

Варто

✓Розтягуйте заповнення на фіксовані 300–600 мс з їзинг-аутом — великі й малі прирости лягають в один біт.
✓Ставте хореографію левел-апу: заповнення по вінця, утриманий біт, вибух, а тоді видиме перекочування залишку.
✓Світіть рухомий край — саме яскрава голівка робить сплеск енергією, а не зміною розміру.

Не варто

✕Не стрибайте у значення — миттєвий перескок викидає емоційний заряд, який ніс приріст.
✕Не анімуйте з фіксованою швидкістю; нагорода на 5 рівнів не має вимагати десяти секунд споглядання смуги.
✕Не перезапускайте твін на кожній події — збирайте швидкі прирости в один безперервний сплеск до найновішої цілі.

Поширені помилки

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

Реалізація

Встав це у свого ШІ-асистента (Cursor, Copilot, Claude), щоб додати ефект у проєкт.

Промт

Додай у мій проєкт ефект "Juicy Progress Bar": XP заходить пружним сплеском зі світною голівкою, а левел-ап переливає смугу через край у вибух — прогрес, який відчуваєш, а не просто бачиш.

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

Рекомендації:
- Розтягуйте заповнення на фіксовані 300–600 мс з їзинг-аутом — великі й малі прирости лягають в один біт.
- Ставте хореографію левел-апу: заповнення по вінця, утриманий біт, вибух, а тоді видиме перекочування залишку.
- Світіть рухомий край — саме яскрава голівка робить сплеск енергією, а не зміною розміру.

Чого уникати:
- Не стрибайте у значення — миттєвий перескок викидає емоційний заряд, який ніс приріст.
- Не анімуйте з фіксованою швидкістю; нагорода на 5 рівнів не має вимагати десяти секунд споглядання смуги.
- Не перезапускайте твін на кожній події — збирайте швидкі прирости в один безперервний сплеск до найновішої цілі.

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