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 presets withAnimation(.snappy) { ... } // Fast, small bounce withAnimation(.smooth) { ... } // Gentle, no bounce withAnimation(.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 view ThumbnailView() .matchedGeometryEffect(id: "hero", in: namespace)

// Destination view DetailView() .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 Motion should be purposeful - Don't add animation for its own sake; support the experience without overshadowing it Make motion optional - Supplement with haptics and audio; never use motion as the only way to communicate Aim for brevity - Brief, precise animations feel lightweight and convey information effectively Prefer explicit animations - Use withAnimation over .animation() modifier for clarity Use spring animations - They feel more natural and iOS-native Start with .spring(response: 0.35, dampingFraction: 0.8) - Good default for most interactions Keep animations under 400ms - Longer feels sluggish Let people cancel motion - Don't force users to wait for animations to complete Test on device - Simulator animation timing differs 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

swiftui-animation

安装