Swiftui Animation

SwiftUI Animation Expert

Expert guidance for implementing advanced SwiftUI animations and Metal shader integration. Covers animation curves, springs, transitions, matched geometry effects, PhaseAnimator, KeyframeAnimator, and GPU-accelerated shader effects.

When to Use This Skill

• Understanding motion design principles and when to use animation
• Making animations accessible and platform-appropriate
• Implementing animations in SwiftUI (springs, easing, keyframes)
• Creating view transitions (fade, slide, scale, custom)
• Building hero animations with matchedGeometryEffect
• Adding GPU-accelerated effects with Metal shaders
• Optimizing animation performance
• Creating multi-phase orchestrated animations

Quick Reference

Animation Basics

// Explicit animation (preferred)withAnimation(.spring(response: 0.4, dampingFraction: 0.75)) {    isExpanded.toggle()}
// iOS 17+ spring presetswithAnimation(.snappy) { ... }  // Fast, small bouncewithAnimation(.smooth) { ... }  // Gentle, no bouncewithAnimation(.bouncy) { ... }  // More bounce

Common Transitions

// Basic.transition(.opacity).transition(.scale).transition(.slide).transition(.move(edge: .bottom))
// Combined.transition(.move(edge: .trailing).combined(with: .opacity))
// Asymmetric.transition(.asymmetric(    insertion: .move(edge: .bottom),    removal: .opacity))

Matched Geometry Effect

@Namespace var namespace
// Source viewThumbnailView()    .matchedGeometryEffect(id: "hero", in: namespace)
// Destination viewDetailView()    .matchedGeometryEffect(id: "hero", in: namespace)

Metal Shader Effects (iOS 17+)

// Color manipulation.colorEffect(ShaderLibrary.invert())
// Pixel displacement.distortionEffect(    ShaderLibrary.wave(.float(time)),    maxSampleOffset: CGSize(width: 20, height: 20))
// Full layer access.layerEffect(ShaderLibrary.blur(.float(radius)), maxSampleOffset: .zero)

Reference Materials

Detailed documentation is available in references/:

• motion-guidelines.md - HIG Motion design principles

  • Purpose-driven motion philosophy
  • Accessibility requirements
  • Platform-specific considerations (iOS, visionOS, watchOS)
  • Animation anti-patterns to avoid

• animations.md - Complete animation API guide

  • Implicit vs explicit animations
  • Spring parameters and presets
  • Animation modifiers (speed, delay, repeat)
  • PhaseAnimator for multi-step sequences
  • KeyframeAnimator for property-specific timelines
  • Custom animatable properties

• transitions.md - View transition guide

  • Built-in transitions (opacity, scale, slide, move)
  • Combined and asymmetric transitions
  • Matched geometry effect implementation
  • Hero animation patterns
  • Content transitions (iOS 17+)
  • Custom transition creation

• metal-shaders.md - GPU shader integration

  • SwiftUI shader modifiers (colorEffect, distortionEffect, layerEffect)
  • Writing Metal shader functions
  • Embedding MTKView with UIViewRepresentable
  • Cross-platform Metal integration (iOS/macOS)
  • Performance considerations

Common Patterns

Expandable Card

struct ExpandableCard: View {    @State private var isExpanded = false
    var body: some View {        VStack {            RoundedRectangle(cornerRadius: isExpanded ? 20 : 12)                .fill(.blue)                .frame(                    width: isExpanded ? 300 : 150,                    height: isExpanded ? 400 : 100                )        }        .onTapGesture {            withAnimation(.spring(response: 0.35, dampingFraction: 0.75)) {                isExpanded.toggle()            }        }    }}

List Item Appearance

ForEach(Array(items.enumerated()), id: \.element.id) { index, item in    ItemRow(item: item)        .transition(.asymmetric(            insertion: .move(edge: .trailing).combined(with: .opacity),            removal: .move(edge: .leading).combined(with: .opacity)        ))        .animation(.spring().delay(Double(index) * 0.05), value: items)}

Pulsing Indicator

Circle()    .fill(.blue)    .frame(width: 20, height: 20)    .scaleEffect(isPulsing ? 1.2 : 1.0)    .opacity(isPulsing ? 0.6 : 1.0)    .onAppear {        withAnimation(.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) {            isPulsing = true        }    }

Best Practices

1. Motion should be purposeful - Don't add animation for its own sake; support the experience without overshadowing it
2. Make motion optional - Supplement with haptics and audio; never use motion as the only way to communicate
3. Aim for brevity - Brief, precise animations feel lightweight and convey information effectively
4. Prefer explicit animations - Use withAnimation over .animation() modifier for clarity
5. Use spring animations - They feel more natural and iOS-native
6. Start with .spring(response: 0.35, dampingFraction: 0.8) - Good default for most interactions
7. Keep animations under 400ms - Longer feels sluggish
8. Let people cancel motion - Don't force users to wait for animations to complete
9. Test on device - Simulator animation timing differs
10. Profile shader performance - GPU time matters for complex effects

Troubleshooting

Animation not working

• Ensure state change is wrapped in withAnimation
• Check that the property is animatable
• Verify the view is actually changing

Matched geometry jumps

• Both views must use the same ID and namespace
• Use explicit withAnimation when toggling
• Check zIndex for proper layering

Shader not appearing

• Verify .metal file is added to target
• Check shader function signature matches expected format
• Ensure maxSampleOffset is set correctly for distortion effects