АнімаціяПочатковий

Punch Scale

Миттєве збільшення масштабу об'єкта з пружним поверненням до норми.

juicerewarduifeedback

Приклади

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

Огляд

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

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

Це об'єктний брат камерного zoom punch: камерна версія пунктуює всю сцену, а панч-скейл позначає, що саме відреагувало. Майже кожен соковитий UI-лічильник, пікап чи іконка використовує його версію.

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

Масштаб панчу1.35

Тривалість осідання250ms

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

UIПідбирання/ЛутMatch-3Гіперказуалки

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

Варто

✓Стрибайте до збільшеного розміру майже миттєво (один-два кадри) — «поп» читається зі стрибка, а не з росту.
✓Повертайтесь з овершут-ізінгом (back/elastic), щоб об'єкт приземлявся з відскоком, а не здувався.
✓Масштабуйте панч під важливість події — монета тікає на 1.15, левел-ап може дозволити собі 1.6.

Не варто

✕Не панчте критичний для лейауту UI, що зсуває сусідів, — масштабуйте візуально (transform), ніколи через розмір у лейауті.
✕Не ставте панчі в чергу на швидких повторюваних подіях — перезапускайте поточний, а не стакайте дедалі більші масштаби.
✕Не панчте все на екрані одночасно — одночасні попи конкурують, і не читається нічого.

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

⚠Повільний твін угору замість стрибка — читається як ріст, а не удар.
⚠Масштаб від неправильного півота (кут замість центру) — поп виглядає як зсув.
⚠Не скинутий масштаб при перевикористанні об'єкта з пулу — він назавжди лишається великим.

Реалізація

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

Промт

Додай у мій проєкт ефект "Punch Scale": Миттєве збільшення масштабу об'єкта з пружним поверненням до норми.

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

Рекомендації:
- Стрибайте до збільшеного розміру майже миттєво (один-два кадри) — «поп» читається зі стрибка, а не з росту.
- Повертайтесь з овершут-ізінгом (back/elastic), щоб об'єкт приземлявся з відскоком, а не здувався.
- Масштабуйте панч під важливість події — монета тікає на 1.15, левел-ап може дозволити собі 1.6.

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

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