Master SwiftUI animations — implicit and explicit animations, transitions, matched geometry effects, phase animations, and performance optimisation.
SwiftUI provides two approaches to animation: implicit animations applied with the .animation() modifier, and explicit animations triggered with withAnimation(). Implicit animations animate a specific view property whenever its value changes, while explicit animations wrap a state change to animate all resulting view updates simultaneously. For most use cases, explicit animations with withAnimation are preferred because they provide clearer control over which state changes trigger animation and ensure consistent timing across all affected views. SwiftUI includes built-in animation curves: .easeInOut for natural-feeling transitions, .spring() for physics-based motion with configurable response, damping, and blend duration, .linear for constant-rate motion, and .interpolatingSpring() for highly customisable spring physics. The .spring() animation is Apple's recommended default for most UI animations because it produces natural-feeling motion that decelerates smoothly without requiring a fixed duration.
Transitions define how views appear and disappear from the view hierarchy. Built-in transitions include .opacity (fade in/out), .slide (slide from the leading edge), .scale (grow from or shrink to a point), .move(edge:) (enter/exit from a specific edge), and .push(from:) (push the old view while bringing in the new). Transitions can be asymmetric (different animations for insertion and removal) using .asymmetric(insertion:, removal:). For hero-style transitions where an element appears to move from one view to another, matchedGeometryEffect creates a visual connection by smoothly animating position, size, and shape between two views sharing the same identifier and namespace. This technique is commonly used for expanding card transitions, shared element navigation, and morphing tab bar selections. The key to smooth matched geometry animations is ensuring both the source and destination views are present in the view hierarchy during the transition, typically achieved through conditional rendering within a common parent view.
Phase animations, introduced in iOS 17, enable multi-step animation sequences where a view cycles through a series of defined phases, each with its own animation properties. This is ideal for attention-grabbing effects like pulsing buttons, breathing indicators, or multi-step state transitions. Define phases as an enum conforming to CaseIterable, and the PhaseAnimator view iterates through them continuously or in response to triggers. Keyframe animations provide even more granular control, allowing you to define specific property values at specific points in the animation timeline for multiple properties simultaneously. This enables complex coordinated animations where position, scale, rotation, and opacity each follow independent timing curves. For example, a notification badge might scale up with a bounce while simultaneously rotating slightly and fading in, with each property following its own keyframe track. These advanced animation APIs eliminate the need for timer-based animation hacks and ensure animations are interruptible, reversible, and performance-optimised by the framework.
Smooth animations require consistent sixty or one hundred twenty frames per second rendering, which means each frame must be computed and rendered within eight to sixteen milliseconds. Common causes of animation jank include expensive view body computations triggered by animation state changes, complex view hierarchies that require extensive layout calculation, and GPU-intensive effects like blur, shadow, and opacity compositing on overlapping views. To optimise animation performance, keep animated view hierarchies simple by extracting complex sub-views that do not animate. Use .drawingGroup() to flatten complex animated views into a single composited layer rendered on the GPU. Avoid animating views that trigger expensive body evaluations — if a view's body computation is expensive, extract the animated portion into a separate lightweight view. Profile animations using Instruments' Core Animation template, which highlights dropped frames, offscreen rendering passes, and blended layers. The Xcode preview canvas provides real-time animation preview, enabling rapid iteration on animation timing without running the app on a device.
Apple recommends .spring() with default parameters for most UI animations. Spring animations produce natural-feeling motion that decelerates smoothly, handles interruption gracefully, and does not require specifying a fixed duration.
Use NavigationStack with .navigationTransition() modifier in iOS 18, or matchedGeometryEffect for custom hero transitions between views. For simple cases, the default NavigationStack push animation is appropriate and consistent with iOS conventions.