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

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

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

Фізика обертання

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

Базова модель:

// Кутова швидкість зменшується кожен кадр
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

Формула для decelerationFactor при відомих initialVelocity та targetAngle:

let totalRotation = currentAngle + (Double(minFullRotations) * 2 * .pi) + targetAngle
// Розв'язуємо геометричну прогресію: sum = v0 / (1 - factor)
decelerationFactor = 1 - initialVelocity / totalRotation

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

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.notificationOccurred(.success) на iOS; VibrationEffect.createOneShot(100, VibrationEffect.DEFAULT_AMPLITUDE) на Android
• Lottie-конфетті: окремий overlay над колесом, відтворюється після зупинки
• Підсвітлення сектора: CALayer з анімацією shadowOpacity 0 → 1 → 0 тричі (мигання)

Реалізація по платформах

iOS: CADisplayLink для фізики + CALayer або UIView обертання. Сектори малюємо через CAShapeLayer з UIBezierPath.

Android: ValueAnimator з кастомним TimeInterpolator (логарифмічне замедлення) + кастомний View з Canvas.drawArc.

Flutter: AnimationController з кастомним Simulation (спадкоємець SpringSimulation чи власний) + CustomPainter для малювання секторів.

React Native: Animated.Value з useNativeDriver: true + react-native-svg для графіки секторів, чи готовий пакет react-native-wheel-pick.

Терміни: 2–3 дні включають фізику, логіку зупинки, візуальний фідбек та інтеграцію з серверною логікою призів.