swift swiftui animations ios ui

SwiftUI animations and transitions

Sofia Martinez Jan 2026

2 tabs

import SwiftUI

struct AnimationExamplesView: View {
    @State private var isExpanded = false
    @State private var rotation: Double = 0
    @State private var scale: CGFloat = 1.0
    @Namespace private var animation

    var body: some View {
        VStack(spacing: 30) {
            // Basic implicit animation
            RoundedRectangle(cornerRadius: isExpanded ? 50 : 10)
                .fill(isExpanded ? Color.blue : Color.red)
                .frame(
                    width: isExpanded ? 300 : 100,
                    height: isExpanded ? 300 : 100
                )
                .animation(.spring(response: 0.5, dampingFraction: 0.6), value: isExpanded)
                .onTapGesture {
                    isExpanded.toggle()
                }

            // Explicit animation with rotation
            Image(systemName: "arrow.clockwise")
                .font(.system(size: 50))
                .rotationEffect(.degrees(rotation))
                .scaleEffect(scale)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 0.5)) {
                        rotation += 360
                        scale = 1.5
                    }

                    withAnimation(.easeInOut(duration: 0.5).delay(0.5)) {
                        scale = 1.0
                    }
                }

            // Matched geometry effect
            if !isExpanded {
                Circle()
                    .fill(Color.green)
                    .frame(width: 50, height: 50)
                    .matchedGeometryEffect(id: "circle", in: animation)
            } else {
                Circle()
                    .fill(Color.green)
                    .frame(width: 200, height: 200)
                    .matchedGeometryEffect(id: "circle", in: animation)
            }
        }
    }
}

import SwiftUI

struct ScaleAndFadeTransition: ViewModifier {
    let isActive: Bool

    func body(content: Content) -> some View {
        content
            .scaleEffect(isActive ? 1 : 0.5)
            .opacity(isActive ? 1 : 0)
    }
}

extension AnyTransition {
    static var scaleAndFade: AnyTransition {
        .modifier(
            active: ScaleAndFadeTransition(isActive: false),
            identity: ScaleAndFadeTransition(isActive: true)
        )
    }
}

struct ListItemView: View {
    let item: String
    @State private var isVisible = false

    var body: some View {
        HStack {
            Image(systemName: "circle.fill")
                .foregroundColor(.blue)

            Text(item)
                .font(.headline)

            Spacer()

            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 2)
        .scaleEffect(isVisible ? 1 : 0.8)
        .opacity(isVisible ? 1 : 0)
        .onAppear {
            withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) {
                isVisible = true
            }
        }
    }
}

struct AnimatedListView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]
    @State private var newItem = ""

    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                ListItemView(item: item)
                    .transition(.asymmetric(
                        insertion: .move(edge: .trailing).combined(with: .opacity),
                        removal: .move(edge: .leading).combined(with: .opacity)
                    ))
            }

            HStack {
                TextField("New item", text: $newItem)
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                Button("Add") {
                    withAnimation(.spring()) {
                        items.append(newItem)
                        newItem = ""
                    }
                }
            }
            .padding()
        }
    }
}

2 files · swift Explain with highlit

SwiftUI makes animations declarative and automatic. The .animation() modifier animates state changes with built-in curves like .easeInOut, .spring(), or custom timing. Explicit animations use withAnimation {} blocks to scope which changes animate. Transitions define how views appear/disappear—.slide, .opacity, .scale, or asymmetric combinations. MatchedGeometryEffect creates hero animations between views. For complex animations, I use AnimatableModifier with custom animatable data. Gestures combine with animations for interactive experiences. The key is binding animations to state changes—SwiftUI automatically interpolates. Reducing motion respects accessibility preferences with @Environment(\.accessibilityReduceMotion).