Animated state changes in iOS Swift

Introduction

Animated state changes make your app feel alive and smooth. They help users see what is happening when things change on the screen.

When a button changes color after being tapped

When a view moves or resizes smoothly instead of jumping

When showing or hiding content with a fade effect

When toggling between different layouts or modes

When updating a progress bar or loading indicator

Syntax

iOS Swift

withAnimation {
    // change your state here
}

Use withAnimation to wrap the state change you want to animate.

SwiftUI automatically animates views that depend on the changed state.

Examples

This toggles a boolean state isOn with animation.

iOS Swift

withAnimation {
    isOn.toggle()
}

This changes showDetails to true with a smooth ease-in-out animation lasting half a second.

iOS Swift

withAnimation(.easeInOut(duration: 0.5)) {
    showDetails = true
}

This moves a view by changing offset with a spring bounce effect.

iOS Swift

withAnimation(.spring()) {
    offset = 100
}

Sample App

This app shows a circle that changes size and color when you press the button. The changes happen smoothly because the state change is wrapped in withAnimation.

iOS Swift

import SwiftUI

struct AnimatedStateChangeView: View {
    @State private var isCircleBig = false

    var body: some View {
        VStack {
            Circle()
                .fill(isCircleBig ? Color.blue : Color.red)
                .frame(width: isCircleBig ? 200 : 100, height: isCircleBig ? 200 : 100)

            Button("Toggle Size and Color") {
                withAnimation {
                    isCircleBig.toggle()
                }
            }
            .padding()
        }
    }
}

struct AnimatedStateChangeView_Previews: PreviewProvider {
    static var previews: some View {
        AnimatedStateChangeView()
    }
}

Important Notes

Always wrap your state changes inside withAnimation to animate them.

You can customize animation speed and style by passing parameters to withAnimation.

Use the .animation modifier on views to link animations to specific state changes.

Summary

Animated state changes make UI updates smooth and clear.

Use withAnimation to animate changes in your state variables.

Combine with view modifiers like .animation for best results.