SwiftUI .animation()

The .animation() modifier applies an animation to a view.

Syntax

View
    .animation(animation, value: switchValue)

The .animation() modifier takes two arguments:

• An animation type property or method, for example .easeIn or .easeIn(duration: 2).
• A value that triggers the animation when the switchValue variable changes. This variable can be an integer or boolean.

Below is a table describing some of the animation type properties and methods.

Example

The following example shows text that fades in when a button is pressed:

import SwiftUI

struct AnimationView: View {
    @State private var showText = false

    var body: some View {
        VStack {
            Button("Show Secret Message") {
                showText.toggle()
            }
            .buttonStyle(.bordered)

            Text("Hello!")
                .font(.largeTitle)
                .opacity(showText ? 1 : 0)
                .animation(.easeIn(duration: 2), value: showText)
        }
    }
}

Copy to clipboard
Copy to clipboard

In the example above, showText is initially set to false, setting the opacity of the view Text("Hello!") to be 0, hiding the text.

When the button is pressed, showText changes to be true and triggers the animation, easing in the text to a visible opacity of 1 over a 2 second duration.

This will display: