Icon Morphing Animation Implementation in Mobile Apps
Button "play → pause" with smooth icon transition, hamburger menu transforming to X, heart icon that "jumps" on tap—these aren't decoration. They're feedback that reduces cognitive load. Users don't read captions; they perceive state through shape.
Technical Approaches by Platform
On iOS, icon morphing is implemented via CAShapeLayer and path animation. Two UIBezierPath objects must have equal control points—otherwise Core Animation can't interpolate and produces "collapse to point" artifacts. Most common mistake: designer exports play icon with 3 points, pause with 4.
let morphAnimation = CABasicAnimation(keyPath: "path")
morphAnimation.fromValue = playPath.cgPath
morphAnimation.toValue = pausePath.cgPath
morphAnimation.duration = 0.25
morphAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
shapeLayer.add(morphAnimation, forKey: "morphing")
shapeLayer.path = pausePath.cgPath
For complex icons with mismatched control point counts, use CGPath interpolation through intermediate keyframe or Lottie library—it handles all the math.
On Android, use AnimatedVectorDrawable with <animated-vector> and <objectAnimator> on pathData. Android Studio supports SVG import with auto-normalization, but complex shapes sometimes break point compatibility. Verify via PathParser.createPathFromPathData and manual audit in vector editor.
In Flutter, two options: CustomPainter with Path.lerp for simple shapes or Lottie for complex ones. Path.lerp requires equal vertex count—same issue. For icons with different topology (star ↔ circle), use MorphableShape from morphable_shape package or intermediate keyframe states.
Lottie as Universal Tool
When morphing is more complex than play/pause—icon transitions through 3–4 states with overlapping elements—the right path: designer creates animation in After Effects or Rive, exports to .lottie / .json, we play via lottie-ios / lottie-android / lottie-flutter. No math in code, full design fidelity.
Important Lottie nuance: LottieAnimationView.setMinAndMaxProgress(0f, 0.5f) plays only first half (A→B), setMinAndMaxProgress(0.5f, 1f) plays reverse (B→A). Standard pattern for dual-state icons.
What's Included
Receive SVG icons or Lottie file from designer. If SVG—normalize paths (equal point count), convert for target platform. Implement animation with consistent timing. Add haptic feedback where appropriate. Check with slow animations and accessibility Reduce Motion mode.
Timeline: 1–3 days depending on icon count and transition complexity.