Animations

Create smooth visual updates in response to state changes.

Overview

You tell SwiftUI how to draw your app’s user interface for different states, and then rely on SwiftUI to make interface updates when the state changes.

[Image]

To avoid abrupt visual transitions when the state changes, add animation in one of the following ways:

Animate all of the visual changes for a state change by changing the state inside a call to the withAnimation(_:_:) global function.
Add animation to a particular view when a specific value changes by applying the animation(_:value:) view modifier to the view.
Animate changes to a Binding by using the binding’s animation(_:) method.

SwiftUI animates the effects that many built-in view modifiers produce, like those that set a scale or opacity value. You can animate other values by making your custom views conform to the Animatable protocol, and telling SwiftUI about the value you want to animate.

When an animated state change results in adding or removing a view to or from the view hierarchy, you can tell SwiftUI how to transition the view into or out of place using built-in transitions that AnyTransition defines, like slide or scale. You can also create custom transitions.

For design guidance, see Motion in the Human Interface Guidelines.

Topics

Adding state-based animation to an action

Adding state-based animation to a view

Creating phase-based animation

Creating keyframe-based animation

Creating custom animations

Making data animatable

Updating a view on a schedule

Synchronizing geometries

Defining transitions

Moving an animation to another view

Deprecated types

AnimatableModifier