Реалізація анімованого прогресу досягнень у мобільних додатках
Система досягнень без анімації — це просто список чекбоксів. Коли користувач розблокує значок й бачить плавне заповнення прогресс-кільця, вспишку частиц та анімоване появлення бейджа — він запам'ятовує цей момент. Правильно реалізована анімація перетворює технічний факт на емоціональну подію.
Прогресс-кільцо з анімацією
Круговий прогрес — найпоширеніший елемент систем досягнень.
На iOS — CAShapeLayer з анімацією strokeEnd:
let progressLayer = CAShapeLayer()
progressLayer.path = UIBezierPath(arcCenter: center, radius: radius,
startAngle: -(.pi / 2), endAngle: 1.5 * .pi, clockwise: true).cgPath
progressLayer.strokeEnd = 0
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = previousProgress // наприклад, 0.6
animation.toValue = newProgress // наприклад, 0.85
animation.duration = 0.8
animation.timingFunction = CAMediaTimingFunction(name: .easeOut)
progressLayer.add(animation, forKey: "progressAnimation")
progressLayer.strokeEnd = newProgress
Важливо встановлювати strokeEnd на layer ПІСЛЯ додавання анімації — інакше шар «прискочить» в кінцевий стан одразу.
На Android — ObjectAnimator.ofFloat(progressView, "progress", from, to) з кастомним View, що малює дугу через Canvas.drawArc, або CircularProgressIndicator з Material 3 з setProgressCompat(value, animate: true).
Анімація розблокування
Момент, коли досягнення відкривається, повинен бути яскравим. Типова послідовність:
-
Shake/pulse бейджа:
CAKeyframeAnimationнаtransform.scaleзі значеннями[1, 1.15, 0.95, 1.05, 1.0]— імітація «щелчка» -
Reveal анімація: бейдж з'являється через circular reveal або scale 0→1 з
UISpringTimingParameters(dampingRatio: 0.6) -
Частинки:
CAEmitterLayerз короткою burst-емісією (birthRate = 200, lifetime = 0.8) — конфетті або зірочки -
Haptic:
UINotificationFeedbackGenerator(.success)синхронно з peak анімації
У Flutter та ж послідовність через AnimationController з кількома Tween та SequenceAnimation з пакету flutter_sequence_animation, або ланцюжок Future.delayed + AnimationController.forward().
Streaks та цепочки прогресу
Ежедневний streak — окремий візуальний елемент. Кожна день-ячейка повинна «загоратися» послідовно (stagger), а поточний день — пульсирувати через бесконечну анімацію CABasicAnimation(keyPath: "opacity") з autoreverses: true.
При досягненні milestone (7 днів, 30 днів) — спеціальна celebratory анімація: у Flutter це showDialog з Lottie всередину, який відтворюється однократно.
Доступність
Reduce Motion на iOS та Disable animations на Android повинні бути враховані. При включених настройках замінюємо анімації на мгновенну зміну стану без particle effects. Перевіряємо через UIAccessibility.isReduceMotionEnabled / Settings.Global.ANIMATOR_DURATION_SCALE == 0.
Терміни: 1–3 дні залежно від кількості анімаційних станів та платформ.