Реалізація Spin-the-Wheel (колесо фортуни) у мобільному додатку

Реалізація Spin-the-Wheel (колесо фортуни) у мобільному додатку

Колесо фортуни — гейміфікаційний елемент, який може як захопити користувача, так і розчарувати зламаною механікою. Ми стикалися з проектами, де проста анімація обертання виглядала неприродно, а виграшний сектор визначався банальним таймером без урахування фізики. Розробляючи колесо під ключ, ми спираємося на точну фізичну модель, дискретні кроки зупинки та візуальний фідбек, який перетворює момент призу на міні-подію. Нижче — технічні деталі, перевірені на 40+ гейміфікаційних проектах за понад 5 років досвіду.

Фізика обертання: як досягти реалізму?

Колесо має імітувати справжній фізичний об'єкт з інерцією та тертям. Просте «крутити N секунд і зупинитися» не працює — потрібне експоненціальне уповільнення. Базова модель на iOS виглядає так:

// Кутова швидкість зменшується кожен кадр angularVelocity *= decelerationFactor // 0.96–0.98 для повільного уповільнення // CADisplayLink оновлює кут кожен кадр currentAngle += angularVelocity * dt wheelLayer.transform = CATransform3DMakeRotation(currentAngle, 0, 0, 1) // Зупинка при досягненні мінімальної швидкості if abs(angularVelocity) < 0.01 { stopAndSnap() } 

Параметр decelerationFactor визначає відчуття: 0.99 — важкий барабан із тривалим обертанням, 0.95 — легкий і різкий. Ми підбираємо його під концепцію бренду. Для наочності порівняємо варіанти:

Чому точна зупинка на потрібному секторі — не обман?

Чесна рандомізація та точна зупинка на визначеному секторі сумісні. Алгоритм:

1. Виграшний сектор визначається до старту — сервером або клієнтським seed.
2. Цільовий кут: targetAngle = sectorMidpoint + randomOffset(±halfSectorAngle).
3. decelerationFactor коригується так, щоб колесо завершило цілу кількість обертів і потрапило в targetAngle.

Формула для обчислення:

let totalRotation = currentAngle + (Double(minFullRotations) * 2 * .pi) + targetAngle decelerationFactor = 1 - initialVelocity / totalRotation 

Це приховує зумовленість — обертання виглядає природно, а зупинка припадає на потрібний сектор.

Snap-анімація та візуальний фідбек: коли перемога відчувається реальною

Наприкінці обертання додаємо «відскок» через CASpringAnimation:

let snapAnimation = CASpringAnimation(keyPath: "transform.rotation.z") snapAnimation.fromValue = currentAngle snapAnimation.toValue = snappedAngle snapAnimation.stiffness = 200 snapAnimation.damping = 15 snapAnimation.initialVelocity = angularVelocity 

Після зупинки запускаємо:

• Haptic feedback: UINotificationFeedbackGenerator на iOS, VibrationEffect на Android.
• Lottie-конфетті: overlay поверх колеса.
• Підсвічування сектора: CALayer з анімацією shadowOpacity (три мигання).

Реалізація по платформах: що входить у роботу

Для кожної платформи використовуємо нативні API:

• iOS: CADisplayLink + CALayer або UIView. Сектори — CAShapeLayer / UIBezierPath.
• Android: ValueAnimator + кастомний TimeInterpolator (логарифм). Canvas.drawArc.
• Flutter: AnimationController + кастомний Simulation (спадкоємець SpringSimulation). CustomPainter.
• React Native: Animated.Value + react-native-svg або готовий пакет.

Зазначимо, що входить у наш проект:

• Фізична модель з регульованим уповільненням
• Логіка зупинки на заданому секторі (із серверною верифікацією)
• Візуальний фідбек (snap, haptic, конфетті)
• Інтеграція з системою нагород (in-app purchase, аналітика)
• Тестування на 10+ пристроях з різними версіями ОС
• Документація з API та кастомізації

Як ми працюємо: етапи та терміни

1. Аналіз — обговорюємо механіку, частоту випадання призів, бренд-стиль. Оцінюємо складність інтеграції з вашим бекендом.
2. Проектування — обираємо платформу, готуємо прототип фізики в ізоляції.
3. Реалізація — пишемо код, налаштовуємо decelerationFactor, тестуємо зупинку.
4. Інтеграція — підключаємо логіку призів, аналітику (Firebase, Amplitude), A/B-тести.
5. Деплой — завантажуємо в App Store / Google Play, налаштовуємо push-повідомлення (APNs/FCM) для нагадувань.

Терміни: від 2 до 5 днів залежно від складності. Вартість розраховується індивідуально після брифа. Отримайте консультацію — напишіть нам з описом проекту.

Типові помилки та як їх уникнути

• Занадто швидка або повільна анімація — вирішується налаштуванням decelerationFactor на етапі прототипування.
• Помітна зумовленість — уникаємо фіксованої кількості обертів, використовуємо випадковий зсув у межах сектора.
• Відсутність зворотного зв'язку на старих пристроях — тестуємо haptic та анімації на пристроях 3-річної давності.
• Проблеми з App Store Review — слідкуємо, щоб колесо не імітувало азартні ігри (Section 4.2/5.1). Завжди використовуємо чесну рандомізацію з серверною перевіркою.

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

Інтеграція з аналітикою та push-повідомленнями

Колесо фортуни — інструмент зростання, який потрібно правильно вимірювати. Ми налаштовуємо події: spin_started, spin_completed, prize_claimed, prize_dismissed. У Firebase Analytics або Amplitude це займає 2–3 години і дає повну картину воронки залученості.

A/B-тести через Firebase Remote Config або Amplitude Experiment дозволяють змінювати набори призів, коефіцієнт уповільнення та частоту показу колеса без нового релізу додатку. Це швидше, надійніше та дешевше за альтернативні підходи, що вимагають повного циклу публікації в App Store або Google Play.

Push-повідомлення через APNs та FCM нагадують користувачам про щоденну можливість прокрутити колесо. За даними наших клієнтів, такі нагадування підвищують DAU на 12–18% протягом першого місяця після запуску. Ми налаштовуємо шаблони повідомлень та логіку тригерів на стороні сервера, щоб система працювала автономно. Вартість інтеграції аналітики та push-повідомлень визначається після аналізу проекту.