Animated Achievement Progress Implementation in Mobile Apps
Achievement system without animation is just a checkbox list. When user unlocks icon and sees smooth progress ring fill, particle burst, and badge appear—this becomes memorable. Right animation transforms technical fact into emotional event.
Progress Ring with Animation
Circular progress is most common achievement element.
On iOS, use CAShapeLayer with strokeEnd animation:
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 // e.g., 0.6
animation.toValue = newProgress // e.g., 0.85
animation.duration = 0.8
animation.timingFunction = CAMediaTimingFunction(name: .easeOut)
progressLayer.add(animation, forKey: "progressAnimation")
progressLayer.strokeEnd = newProgress
Important: set strokeEnd on layer AFTER adding animation—otherwise layer "jumps" to final state immediately.
On Android, use ObjectAnimator.ofFloat(progressView, "progress", from, to) with custom View drawing arc via Canvas.drawArc, or CircularProgressIndicator from Material 3 with setProgressCompat(value, animate: true).
Unlock Animation
Moment achievement opens should be vivid. Typical sequence:
-
Shake/pulse badge:
CAKeyframeAnimationontransform.scalewith values[1, 1.15, 0.95, 1.05, 1.0]—imitates "click" -
Reveal animation: badge appears via circular reveal or scale 0→1 with
UISpringTimingParameters(dampingRatio: 0.6) -
Particles:
CAEmitterLayerwith short burst (birthRate = 200, lifetime = 0.8)—confetti or stars -
Haptic:
UINotificationFeedbackGenerator(.success)synced with peak animation
In Flutter, same sequence via AnimationController with multiple Tween and SequenceAnimation from flutter_sequence_animation package, or chain via Future.delayed + AnimationController.forward().
Streaks and Progress Chains
Daily streak is separate visual element. Each day-cell should "light up" sequentially (stagger), and current day—pulse via infinite CABasicAnimation(keyPath: "opacity") with autoreverses: true.
On milestone reach (7 days, 30 days)—special celebration animation: in Flutter this is showDialog with Lottie inside, playing once.
Accessibility
Reduce Motion on iOS and Disable animations on Android must be respected. With these enabled, replace animations with instant state change without particles. Check via UIAccessibility.isReduceMotionEnabled / Settings.Global.ANIMATOR_DURATION_SCALE == 0.
Timeline: 1–3 days depending on animation state count and platforms.