Тактильний reward popup: анімація, конфетті та лічильник балів

Користувач завершив квест, отримав 500 монет — і додаток показує нудний AlertDialog з "Вітаємо, +500". Момент втрачено. Нагорода має відчуватися фізично: частинки конфетті, лічильник, що біжить з прискоренням, тактильний відгук у момент піку. Без цього гейміфікація перетворюється на формальність.

Ми проектуємо reward popup, який перетворює технічну подію на емоцію. За 5 років на ринку реалізували більше 50 гейміфікаційних проектів — від стартапів до enterprise. Наші сертифіковані інженери використовують нативні анімації (SwiftUI/UIKit, Jetpack Compose), Core Haptics, CAEmitterLayer. Попап запускається за 1.2–2 секунди — якщо довше, користувач починає тапати «закрити». В одному fintech-проекті заміна стандартного Alert на reward popup з анімацією лічильника та haptic збільшила конверсію повторних дій на 27% за тиждень.

Чому звичайний AlertDialog не підходить для нагородження?

Alert — це вікно з інформацією. Reward popup — це мікросценарій з кульмінацією, розрядкою та зворотним зв'язком. Alert не підтримує staggered-анімацію, частинки або haptic. У ньому немає лічильника, який створює ефект «накопичення». Адже саме ці деталі збільшують конверсію повторних дій на 20–30% (дані A/B-тестів наших проектів).

Анатомія reward popup

Типова структура по шарах:

• Backdrop: затемнення фону з blur-ефектом (UIBlurEffect / RenderEffect.createBlurEffect)
• Card: поява знизу або масштабом з пружинною анімацією
• Reward icon: scale + rotation з bounce
• Particle burst: конфетті, зірочки, монети — CAEmitterLayer або Lottie
• Text reveal: лічильник балів, що анімується від попереднього значення до нового
• CTA button: з'являється із затримкою після основної анімації

Ключові елементи: Backdrop з blur, Particle burst з конфетті та анімований лічильник. Весь пайплайн займає 1.2–2 секунди. Довше — користувач починає тапати «закрити».

Як реалізувати анімований лічильник на iOS?

Найдокладніший елемент — анімований лічильник. +500 монет має рахуватися, а не просто з'являтися.

class CountingLabel: UILabel {
    func countFrom(_ start: Int, to end: Int, duration: TimeInterval) {
        let displayLink = CADisplayLink(target: self, selector: #selector(update))
        self.start = start; self.end = end
        self.startTime = CACurrentMediaTime()
        self.duration = duration
        displayLink.add(to: .main, forMode: .common)
    }

    @objc func update(link: CADisplayLink) {
        let elapsed = CACurrentMediaTime() - startTime
        let progress = min(elapsed / duration, 1.0)
        let eased = 1 - pow(1 - progress, 3)  // ease-out cubic
        currentValue = Int(Double(start) + Double(end - start) * eased)
        text = "+\(currentValue)"
        if progress >= 1 { link.invalidate() }
    }
}

У Flutter — TweenAnimationBuilder з curve: Curves.easeOut та Text('${value}') всередині.

Particle burst: CAEmitterLayer vs Lottie

CAEmitterLayer у 2–3 рази продуктивніший за Lottie при рендерингу частинок, але потребує більше коду. Нижче порівняння:

Для однократного burst конфетті при появі попапа — CAEmitterLayer з birthRate = 300 на перші 0.1 секунди, потім birthRate = 0. Це дає ефект «вибуху» без нескінченного потоку.

emitterLayer.birthRate = 1  // включено
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
    emitterLayer.birthRate = 0  // вимкнено — частинки летять до кінця lifetime
}

Lottie-конфетті — простіший шлях: готовий .json файл відтворюється однократно поверх попапа. CAEmitterLayer продуктивніший, але потребує коду. Core Haptics — офіційна документація для тактильних ефектів.

Що таке staggered анімація і чому вона важлива?

Усе має з'являтися не одночасно — stagger створює відчуття «розгортання» нагороди. Кожен елемент має свою таймінг-лінію:

На iOS — DispatchQueue.main.asyncAfter для кожного етапу або UIViewPropertyAnimator з addAnimations(afterDelay:). У Flutter — AnimationController + Interval curves для кожного елемента.

Як додати конфетті з CAEmitterLayer? (покроково)

1. Створіть CAEmitterLayer і встановіть його frame рівним bounds попапа.
2. Налаштуйте emitterCells: задайте вміст (наприклад, прямокутник з кольором), birthRate, lifetime, velocity, scale, spin.
3. Встановіть birthRate = 1 на 0.15 секунди, потім обнуліть (як у коді вище).
4. Додайте шар як sublayer до view попапа.
5. Перевірте, що частинки встигають відмалюватися до dismiss (lifetime ~0.8 с).

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

Що входить в роботу

• Аналіз сценарію користувача та дизайн попапа
• Реалізація на Swift (iOS) або Kotlin (Android) з використанням нативних анімацій
• Інтеграція haptic feedback (Core Haptics / Vibrator)
• Підключення аналітики (Firebase / AppsFlyer)
• Документація та передача вихідного коду
• Підтримка протягом 30 днів після здачі

Гарантуємо коректну роботу на всіх пристроях — протестовано на 20+ моделях. Термін: від 1 дня для стандартного reward popup з анімаціями та haptic на одній платформі.

Анімації в мобільних додатках: Lottie, Rive, Spring та Reanimated

Ми зробили анімації для десятків проєктів — від ігрових інтерфейсів до bank-grade додатків. Знаємо, як змусити 120 fps працювати навіть на Android з ProGuard. Якщо анімація смикається — проблема не в інструменті, а у виборі підходу. Нижче покажемо, як обирати між Lottie та Rive, чому Spring physics перемагає UIView.animate, і як Reanimated 3 вичавлює 60 fps на старих пристроях. Отримайте консультацію щодо вашого проєкту — оцінимо анімаційний шар безкоштовно.

Чому UIView.animate ламається на складних сценаріях

UIView.animate(withDuration:) та ObjectAnimator на Android — правильний вибір для простих переходів. Але щойно анімація стає інтерактивною (користувач тягне елемент, швидкість залежить від жесту), потрібен інший підхід.

На iOS для gesture-driven анімації правильний інструмент — UIViewPropertyAnimator. Він дозволяє призупиняти, обертати та модифікувати анімацію в процесі. Типовий кейс: bottom sheet, який слідує за пальцем, продовжує рух з інерцією після відпускання та притягується до найближчої позиції. З UIView.animate це або не працює зовсім, або потребує ручної фізики.

У SwiftUI withAnimation працює з коробки, але інтерактивність обмежена — немає прямого аналога UIViewPropertyAnimator. Обхідний шлях: .gesture(DragGesture()) + @GestureState + явне обчислення позиції. Або йдемо в SwiftUI Animations API з Animation.spring(duration:bounce:).

Як React Native Reanimated обходить JS-міст

React Native Animated API виконує анімації в JS thread — це джерело джанка при завантаженому bridge. Reanimated 3 вирішує проблему через worklets: функції, які компілюються та виконуються прямо на UI thread без перетину JS-моста.

Приклад: parallax scroll header. На базовому Animated.Value при швидкому скролі FPS падає до 40-45 на mid-range Android. На Reanimated з useAnimatedScrollHandler — стабільні 60 fps, тому що весь перерахунок позиції відбувається на UI thread.

Reanimated 3 з useSharedValue, useAnimatedStyle та withSpring/withTiming — стандарт для анімацій у React Native. Gesture Handler v2 щільно інтегрований: useAnimatedGestureHandler замінює PanResponder і теж працює на UI thread.

Чому Lottie може знижувати FPS на Android і як це виправити

Lottie експортує After Effects анімацію в JSON. На iOS з lottie-ios працює стабільно, але на Android при складних ефектах (blur, частинки, градієнти) векторний рендеринг через Canvas призводить до просадок до 30-40 fps. Рішення — або спрощувати анімацію, або використовувати Rive з апаратним рендерингом. Ми тестували: Lottie-файл з розмиттям 5 МБ на Xiaomi Redmi Note 10 дає 48 fps, аналогічна анімація в Rive (.riv 400 КБ) — 60 fps. Rive працює в 1.25 раза швидше на однаковому пристрої, а при складних ефектах — до 4 разів легше за розміром.

Як вибрати між Lottie та Rive для вашого проєкту?

Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.

Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.

Як впровадити анімації Lottie за 4 кроки?

1. Експорт з After Effects через плагін Bodymovin — отримуєте .json.
2. Додавання файлу до ресурсів проєкту (assets або drawable).
3. Ініціалізація плеєра — в iOS використовуйте LOTAnimationView, в Android — LottieAnimationView.
4. Запуск з параметрами — loopMode, animationSpeed, contentMode. Для складних сценаріїв — кастомний AnimationListener.

На практиці цей підхід працює, але потребує контролю версій Lottie-файлів. Ми рекомендуємо версіонувати їх разом з кодом і тестувати на цільових пристроях.

Spring-фізика та Hero transitions: як досягти природності

Spring-анімація відчувається природньо тому що імітує фізику — масу, жорсткість і демпфування. У SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

Для Hero-переходів (елемент «перелітає» між екранами) на iOS використовуємо UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. У SwiftUI — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero віджет, який працює з коробки.

Як уникнути типових помилок у Hero transitions?

Анімація починається нормально, але на цільовому екрані елемент «стрибає» в фінальну позицію. Причина — AutoLayout constraints застосовуються до завершення анімації. Рішення: layoutIfNeeded() в блоці анімації або використання transform замість frame-змін. На Flutter — перевіряйте HeroFlightShuttleConfiguration. Також слідкуйте за VSync: на Android при 90 Гц дисплеї Hero-перехід може виглядати смиканим, якщо не виставлений Choreographer.

Таблиця: Строки виконання та типові сценарії

Що входить в роботу: анімаційний шар під ключ

• Інтеграція Lottie/Rive-файлів в дизайн-систему
• Код gesture-driven переходів (bottom sheets, drawers, каруселі)
• Тестування на реальних пристроях (iOS, Android)
• Документація з анімацій (архітектура, ключі станів)
• Підтримка при оновленні дизайну (гарантія 30 днів)

У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.

Apple Developer Documentation – UIKit Animations використовується як базова специфікація.