From beagle-ios
Writes Swift animation code using SwiftUI, UIKit, and Core Animation for iOS apps. Covers iOS 18-26 APIs like KeyframeAnimator, PhaseAnimator, matchedGeometryEffect for transitions, gestures, and design implementations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/beagle-ios:ios-animation-implementationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Write animation code that uses Apple's frameworks directly. Third-party animation libraries add dependency risk and often lag behind new OS releases — Apple's APIs are well-optimized for the render pipeline and get free improvements with each iOS version.
Write animation code that uses Apple's frameworks directly. Third-party animation libraries add dependency risk and often lag behind new OS releases — Apple's APIs are well-optimized for the render pipeline and get free improvements with each iOS version.
Check whether the system already handles the motion you need. Apple's HIG: "Many system components automatically include motion, letting you offer familiar and consistent experiences throughout your app." System components also automatically adjust for accessibility settings and input methods — Liquid Glass (iOS 26) responds with greater emphasis to direct touch and produces subdued effects for trackpad. Custom animation can't match this adaptiveness for free, so prefer system-provided motion when it exists.
Skip custom animation when:
.symbolEffect provides the feedback you need.contentTransition(.numericText) handles your data changewithAnimation is sufficientWrite custom animation when:
Choose the right API for the job. Start with SwiftUI animations (simplest, most declarative), drop to UIKit when you need interactive control, and reach for Core Animation only when you need layer-level precision.
| Need | API | Why |
|---|---|---|
| State-driven property changes | withAnimation / .animation(_:value:) | Declarative, automatic interpolation |
| Multi-step sequenced animation | PhaseAnimator | Discrete phases with per-phase timing |
| Per-property timeline control | KeyframeAnimator | Independent keyframe tracks per property |
| Hero transitions between views | matchedGeometryEffect + Namespace | Geometry matching across view identity |
| Navigation push/pop with zoom | .navigationTransition(.zoom) | iOS 18+ built-in zoom transition |
| Custom view insertion/removal | Transition protocol conformance | TransitionPhase-based modifier |
| In-view content swap | .contentTransition() | Numeric text, interpolation, opacity |
| Scroll-position-based effects | .scrollTransition | Phase-driven scroll-linked animation |
| SF Symbol animation | .symbolEffect() | Bounce, pulse, wiggle, breathe, rotate |
| Interactive/interruptible (UIKit) | UIViewPropertyAnimator | Pause, resume, reverse, scrub |
| Per-layer property animation | CABasicAnimation / CASpringAnimation | Shadow, border, cornerRadius animation |
| Complex choreography (layers) | CAKeyframeAnimation + CAAnimationGroup | Multi-property layer animation |
| Physics simulation | UIDynamicAnimator | Gravity, collision, snap, attachment |
| Haptic feedback paired with animation | .sensoryFeedback modifier | Tied to value changes |
| Animated background gradients | MeshGradient | 2D grid of positioned, animated colors |
Detailed patterns and code examples live in the reference files. Load the one that matches your task:
| Task | Reference |
|---|---|
| SwiftUI declarative animations (withAnimation, springs, phase, keyframe) | references/swiftui-animations.md |
| View transitions (navigation, modal, custom Transition protocol) | references/transitions.md |
| Gesture-driven interactive animations | references/gesture-animations.md |
| Core Animation and UIKit animation patterns | references/core-animation.md |
withAnimation, spring parameters, PhaseAnimator, or KeyframeAnimator → swiftui-animations.mdmatchedGeometryEffect, or custom Transition → transitions.mdCABasicAnimation, UIViewPropertyAnimator, layer animations, or bridging SwiftUI↔UIKit → core-animation.mdSprings are the default animation type in modern SwiftUI. Use duration and bounce — not mass/stiffness/damping unless bridging to UIKit/CA.
| Preset | Duration | Bounce | Use Case |
|---|---|---|---|
.smooth | 0.5 | 0.0 | Default transitions, most state changes |
.snappy | 0.3 | 0.15 | Micro-interactions, toggles, quick feedback |
.bouncy | 0.5 | 0.3 | Playful moments, attention-drawing |
.interactiveSpring | 0.15 | 0.0 | Gesture tracking, drag following |
| Custom | varies | varies | .spring(duration: 0.4, bounce: 0.2) |
Apple's HIG: "Make motion optional" and "supplement visual feedback by also using alternatives like haptics and audio to communicate." Every animation must handle Reduce Motion, and important state changes should use multiple feedback channels — not animation alone.
@Environment(\.accessibilityReduceMotion) private var reduceMotion
// Pattern 1: Conditional animation
withAnimation(reduceMotion ? .none : .spring()) {
isExpanded.toggle()
}
// Pattern 2: Simplified alternative
.animation(reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.5, bounce: 0.3), value: isActive)
// Pattern 3: Skip entirely
if !reduceMotion {
view.phaseAnimator(phases) { /* ... */ }
}
Reduce Motion fallback options (from most to least graceful):
.animation(.none) or skip the animation block entirelyApple's HIG: "Don't make people wait for an animation to complete before they can do anything, especially if they have to experience the animation more than once." Every animation must be interruptible.
drawingGroup() moves rendering to Metal.id() modifier) — this destroys and recreates the viewgeometryGroup() when parent geometry changes cause child layout anomalies during animationshadowPath when animating shadows — without it, the system recalculates the path every framePhaseAnimator and looping animations lightweight — they run continuouslynpx claudepluginhub existential-birds/beagle --plugin beagle-iosImplement, review, or improve SwiftUI animations and transitions: explicit/implicit animations, spring curves, phase/keyframe animators, hero transitions, SF Symbol effects, custom animations, and accessibility support.
Guides SwiftUI animation patterns including implicit/explicit animations, transitions, phase/keyframe animations, Animatable protocol, and @Animatable macro. Use when implementing motion or transitions in views.
Guides advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration for iOS/macOS apps.