Animation basics

Animation basics

In SwiftUI you do not animate views directly. You change state, and you tell SwiftUI to animate the change that results. withAnimation { isOpen.toggle() } animates every difference on screen that the state change causes. The .animation(_:value:) modifier animates one view whenever a particular value changes. You choose the timing: a spring, which is the default, or a curve such as .easeInOut.

Any value that can be interpolated will animate: position, size, color, opacity, rotation. To animate a type of your own, conform it to Animatable. The @Animatable macro, new in iOS 26, writes the required animatableData for you.

struct Pulse: View {
    @State private var isBig = false

    var body: some View {
        Circle()
            .fill(isBig ? Color.orange : Color.gray)
            .frame(width: isBig ? 200 : 80)
            .onTapGesture {
                withAnimation(.spring) {       // animate whatever this change affects
                    isBig.toggle()
                }
            }
    }
}

Drive five properties of one view — size, color, corner radius, rotation, offset — from a single Boolean, and animate the change. Try three different springs and describe how they differ.

1. What exactly is animated when you call withAnimation?
2. What is the difference between withAnimation and .animation(_:value:)?
3. What makes a property animatable?

• Animations
• Animation
• WWDC23: Explore SwiftUI animation