Contents

Animation

The way a view changes over time to create a smooth visual transition from one state to another.

Declaration

@frozen struct Animation

Mentioned in

Overview

An Animation provides a visual transition of a view when a state value changes from one value to another. The characteristics of this transition vary according to the animation type. For instance, a linear animation provides a mechanical feel to the animation because its speed is consistent from start to finish. In contrast, an animation that uses easing, like easeOut, offers a more natural feel by varying the acceleration of the animation.

To apply an animation to a view, add the animation(_:value:) modifier, and specify both an animation type and the value to animate. For instance, the Circle view in the following code performs an easeIn animation each time the state variable scale changes:

struct ContentView: View {
    @State private var scale = 0.5

    var body: some View {
        VStack {
            Circle()
                .scaleEffect(scale)
                .animation(.easeIn, value: scale)
            HStack {
                Button("+") { scale += 0.1 }
                Button("-") { scale -= 0.1 }
            }
        }
        .padding()
    }

When the value of scale changes, the modifier scaleEffect(_:anchor:) resizes Circle according to the new value. SwiftUI can animate the transition between sizes because Circle conforms to the Shape protocol. Shapes in SwiftUI conform to the Animatable protocol, which describes how to animate a property of a view.

In addition to adding an animation to a view, you can also configure the animation by applying animation modifiers to the animation type. For example, you can:

For example, the Circle view in the following code repeats the easeIn animation three times by using the repeatCount(_:autoreverses:) modifier:

struct ContentView: View {
    @State private var scale = 0.5

    var body: some View {
        VStack {
            Circle()
                .scaleEffect(scale)
                .animation(.easeIn.repeatCount(3), value: scale)
            HStack {
                Button("+") { scale += 0.1 }
                Button("-") { scale -= 0.1 }
            }
        }
        .padding()
    }
}

A view can also perform an animation when a binding value changes. To specify the animation type on a binding, call its animation(_:) method. For example, the view in the following code performs a linear animation, moving the box truck between the leading and trailing edges of the view. The truck moves each time a person clicks the Toggle control, which changes the value of the $isTrailing binding.

struct ContentView: View {
    @State private var isTrailing = false

    var body: some View {
       VStack(alignment: isTrailing ? .trailing : .leading) {
            Image(systemName: "box.truck")
                .font(.system(size: 64))

            Toggle("Move to trailing edge",
                   isOn: $isTrailing.animation(.linear))
        }
    }
}

Topics

Getting the default animation

Getting linear animations

Getting eased animations

Getting built-in spring animations

Customizing spring animations

Creating custom animations

Configuring an animation

Instance Properties

Instance Methods

Type Properties

Type Methods

See Also

Adding state-based animation to an action