iOS Animation & Interaction Skill

Generate comprehensive animation and interaction infrastructure for iOS applications. This skill provides battle-tested animation utilities, micro-interactions, gesture handlers, loading states, chart animations, and interactive components that make iOS apps feel professional and delightful.

Quick Start

Generate Animation Utilities

python scripts/generate_animation_utilities.py <output_directory>

Generates:

• AnimationUtilities.swift - Spring presets, timing curves, animation coordinator
• MicroInteractions.swift - Button press, shake, pulse, bounce, shimmer effects
• LoadingAnimations.swift - Spinners, progress bars, skeleton loading

Generate Gesture & Interaction Components

python scripts/generate_gesture_interactions.py <output_directory>

Generates:

• GestureComponents.swift - Swipe actions, long press, drag to dismiss, pinch to zoom
• PullToRefresh.swift - Custom pull-to-refresh implementation
• BottomSheet.swift - Interactive bottom sheet with detents
• CardInteractions.swift - Expandable, flippable, draggable cards

Generate Chart Animations

python scripts/generate_chart_animations.py <output_directory>

Generates:

• ChartAnimations.swift - Animated bar, line, pie charts, progress rings, gauges

Common Use Cases

1. Add Button Press Animation

import SwiftUI

struct MyButton: View {
    var body: some View {
        Text("Press Me")
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .buttonPress() // ✅ Add press animation
    }
}

2. Implement Pull to Refresh

struct ContentList: View {
    @State private var isRefreshing = false
    
    var body: some View {
        List(items) { item in
            ItemRow(item: item)
        }
        .pullToRefresh(isRefreshing: $isRefreshing) {
            await refreshData()
        }
    }
}

3. Add Swipe Actions

struct MessageRow: View {
    var body: some View {
        Text("Message content")
            .padding()
            .swipeActions(
                leading: [
                    .init(icon: "pin", color: .blue, action: pinMessage)
                ],
                trailing: [
                    .init(icon: "trash", color: .red, action: deleteMessage)
                ]
            )
    }
}

4. Create Loading States

struct DataView: View {
    @State private var isLoading = true
    
    var body: some View {
        VStack {
            if isLoading {
                LoadingSpinner()
            } else {
                DataContent()
            }
        }
    }
}

// Or use skeleton loading
struct SkeletonView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Rectangle()
                .frame(height: 20)
                .skeleton()
            
            Rectangle()
                .frame(height: 60)
                .skeleton()
        }
        .padding()
    }
}

5. Animate Form Transitions

struct MultiStepForm: View {
    @State private var currentPage = 0
    
    var body: some View {
        ZStack {
            if currentPage == 0 {
                Page1()
                    .transition(.slideAndScale)
            } else if currentPage == 1 {
                Page2()
                    .transition(.slideAndScale)
            }
        }
        .animation(.naturalSpring, value: currentPage)
    }
}

extension AnyTransition {
    static var slideAndScale: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .scale(scale: 0.9)),
            removal: .move(edge: .leading).combined(with: .scale(scale: 0.9))
        )
    }
}

6. Create Animated Charts

struct SalesChart: View {
    let salesData: [AnimatedBarChart.BarData]
    
    var body: some View {
        AnimatedBarChart(
            data: salesData,
            barColor: .blue
        )
        .frame(height: 300)
    }
}

struct ProgressView: View {
    @State private var progress: Double = 0.75
    
    var body: some View {
        AnimatedProgressRing(
            progress: progress,
            color: .green
        )
    }
}

7. Add Success Celebration

struct SuccessView: View {
    @State private var celebrationTrigger = 0
    
    var body: some View {
        Image(systemName: "checkmark.circle.fill")
            .font(.system(size: 60))
            .foregroundColor(.green)
            .successCelebration(trigger: celebrationTrigger)
            .onAppear {
                celebrationTrigger += 1
            }
    }
}

8. Implement Bottom Sheet

struct HomeView: View {
    @State private var showSheet = false
    
    var body: some View {
        Button("Show Details") {
            showSheet = true
        }
        .bottomSheet(
            isPresented: $showSheet,
            detents: [.medium, .large]
        ) {
            DetailContent()
        }
    }
}

9. Create Draggable Cards

struct CardStack: View {
    var body: some View {
        DraggableCard(
            onSwipeLeft: { handleReject() },
            onSwipeRight: { handleAccept() }
        ) {
            CardContent()
        }
    }
}

10. Add Shake on Error

struct ValidationField: View {
    @State private var text = ""
    @State private var shakeCount = 0
    
    var body: some View {
        TextField("Email", text: $text)
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
            .shake(trigger: shakeCount)
            .onSubmit {
                if !isValid(text) {
                    shakeCount += 1
                    HapticStyle.error.trigger()
                }
            }
    }
}

Animation Best Practices

Duration Guidelines

• Micro-interactions: 0.15-0.3s (button press, selection)
• Transitions: 0.3-0.5s (page changes, modals)
• Loading states: 0.5-2s (or indefinite for spinners)
• Celebrations: 0.5-1s (success animations)

Spring Animation Presets

• .naturalSpring - General UI transitions (response: 0.55, damping: 0.825)
• .bouncySpring - Playful interactions (response: 0.6, damping: 0.7)
• .snappySpring - Quick feedback (response: 0.3, damping: 0.9)
• .smoothSpring - Professional apps (response: 0.7, damping: 1.0)

Accessibility Considerations

Always respect reduce motion preferences:

Text("Animated Content")
    .accessibleAnimation(.naturalSpring, value: state)

The skill automatically provides reduce motion support:

• Full animations for users without reduce motion enabled
• Simplified or no animations for users with reduce motion enabled
• VoiceOver announcements for state changes

Integration with Other Skills

With SwiftUI Component Library (Skill #7)

// Add animations to custom components
struct AnimatedCurrencyField: View {
    @State private var amount: Decimal = 0
    @State private var isFocused = false
    
    var body: some View {
        CurrencyTextField(value: $amount)
            .scaleEffect(isFocused ? 1.05 : 1.0)
            .animation(.naturalSpring, value: isFocused)
    }
}

With Form Builder (Skill #11)

// Smooth page transitions in multi-step forms
struct AnimatedForm: View {
    @StateObject private var formState = FormState()
    
    var body: some View {
        FormBuilder(state: formState) {
            // Form pages with animated transitions
        }
        .transition(.asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .move(edge: .leading).combined(with: .opacity)
        ))
        .animation(.naturalSpring, value: formState.currentPage)
    }
}

With Financial Calculator (Skill #9)

// Animate chart updates when calculations change
struct MortgageChart: View {
    let schedule: AmortizationSchedule
    
    var body: some View {
        AnimatedBarChart(
            data: schedule.monthlyPayments.map { payment in
                AnimatedBarChart.BarData(
                    label: payment.month,
                    value: payment.principalPaid
                )
            },
            barColor: .blue
        )
    }
}

With Accessibility Champion (Skill #12)

// Accessible animations that respect user preferences
struct AccessibleButton: View {
    @State private var isPressed = false
    
    var body: some View {
        Button("Submit") {
            // Action
        }
        .buttonPress()
        .accessibleAnimation(.naturalSpring, value: isPressed)
        .accessibilityHint("Double tap to submit")
    }
}

Reference Documentation

For detailed patterns and examples, read the reference files:

• animation_patterns.md - Comprehensive animation patterns including springs, timing curves, micro-interactions, transitions, gestures, loading states, and chart animations
• interaction_patterns.md - Gesture recognizers, pull-to-refresh, parallax effects, card interactions, bottom sheets, and interactive transitions

These files contain:

• Complete code examples for every animation type
• Best practices and performance tips
• Accessibility guidelines
• Common patterns and anti-patterns

Performance Optimization

For Complex Animations

ComplexView()
    .optimizeAnimationPerformance() // Uses drawingGroup()

Animation Coordination

// Coordinate multiple animations
AnimationCoordinator.shared.chain(animations: [
    (delay: 0.0, animation: .naturalSpring, action: { step1() }),
    (delay: 0.3, animation: .bouncySpring, action: { step2() }),
    (delay: 0.6, animation: .smoothSpring, action: { step3() })
])

Haptic Feedback Integration

All interactive components include appropriate haptic feedback:

HapticStyle.light.trigger()    // Subtle feedback
HapticStyle.medium.trigger()   // Standard feedback
HapticStyle.heavy.trigger()    // Strong feedback
HapticStyle.success.trigger()  // Success notification
HapticStyle.warning.trigger()  // Warning notification
HapticStyle.error.trigger()    // Error notification
HapticStyle.selection.trigger() // Selection change

Troubleshooting

Animations Not Working

1. Ensure you're using .animation() with an explicit value binding
2. Check that the state variable is marked with @State or @Binding
3. Verify animations are running on the main thread

Performance Issues

1. Use .drawingGroup() for complex animations
2. Limit the number of simultaneous animations
3. Test on actual devices, not just the simulator
4. Consider using .optimizeAnimationPerformance()

Accessibility Concerns

1. Always use .accessibleAnimation() for user-facing animations
2. Test with VoiceOver and reduce motion enabled
3. Provide alternative feedback (haptics, sounds) for visual animations
4. Ensure content remains accessible during animations

Generated Files Overview

AnimationUtilities.swift (~400 lines)

• Spring animation presets
• Timing curve helpers
• Animation coordinator
• Transition builder
• Performance optimizers
• Reduce motion support
• Custom timing curves
• Haptic feedback integration

MicroInteractions.swift (~350 lines)

• Button press animation
• Shake effect
• Pulse animation
• Bounce animation
• Wiggle effect
• Shimmer loading
• Flip animation
• Attention seeker
• Success celebration

LoadingAnimations.swift (~350 lines)

• Loading spinner
• Dots loading
• Progress bar
• Circular progress
• Skeleton loading
• Pulsing skeleton
• Wave loading
• Loading view wrapper

GestureComponents.swift (~300 lines)

• Swipe actions
• Long press interaction
• Drag to dismiss
• Pinch to zoom
• Double tap to zoom

PullToRefresh.swift (~100 lines)

• Custom pull-to-refresh
• Progress indication
• Haptic feedback

BottomSheet.swift (~150 lines)

• Interactive bottom sheet
• Multiple detents support
• Drag to dismiss

CardInteractions.swift (~200 lines)

• Expandable cards
• Flippable cards
• Draggable cards
• Parallax cards
• Bounce cards

ChartAnimations.swift (~400 lines)

• Animated bar charts
• Animated line charts
• Animated pie charts
• Progress rings
• Gauges

Total: ~2,250 lines of production-ready animation code

Success Criteria

Your animations should:

• ✅ Feel natural and responsive
• ✅ Respect reduce motion preferences
• ✅ Include appropriate haptic feedback
• ✅ Perform smoothly on devices
• ✅ Enhance rather than distract from content
• ✅ Be accessible to all users
• ✅ Use consistent timing and easing
• ✅ Provide clear visual feedback

Next Steps

After implementing animations, consider:

1. Test with VoiceOver and reduce motion enabled
2. Profile animation performance with Instruments
3. Add analytics to track animation effectiveness
4. Gather user feedback on interaction patterns
5. Iterate on animation timing and feel
6. Document custom animations for your team