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

Punch Scale

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

juicerewarduifeedback

Приклади

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

Огляд

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

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

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

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

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

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

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

Лічильники очок і валюти, що підстрибуютьІконки, що реагують на тапПульс предметів при підбиранніЧисла шкоди, що з'являються з вагою

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

Варто

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

Не варто

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

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

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

Реалізація

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

Промт

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

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

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

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

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