How do I write a animation in SwiftUI

Generated on 5/15/2025

1 search

Tailscan

This post is brought to you by Tailscan, the best devtool for Tailwind CSS.

To write an animation in SwiftUI, you can use the SwiftUI animation APIs to create smooth and interactive animations. Here's a basic example of how you can animate a view in SwiftUI:

  1. Basic Animation: You can wrap your state changes with the withAnimation function to animate the changes. For example, if you want to animate a change in a view's position or opacity, you can do it like this:

    struct ContentView: View {
        @State private var isVisible = false
    
        var body: some View {
            VStack {
                Button("Toggle") {
                    withAnimation {
                        isVisible.toggle()
                    }
                }
    
                if isVisible {
                    Text("Hello, SwiftUI!")
                        .transition(.slide)
                }
            }
        }
    }
    
  2. Custom Animations: You can also create custom animations using the Animation struct. For example, you can define a spring animation:

    struct ContentView: View {
        @State private var scale: CGFloat = 1.0
    
        var body: some View {
            VStack {
                Button("Animate") {
                    withAnimation(.spring(response: 0.5, dampingFraction: 0.3, blendDuration: 0)) {
                        scale = scale == 1.0 ? 1.5 : 1.0
                    }
                }
    
                Circle()
                    .frame(width: 100, height: 100)
                    .scaleEffect(scale)
            }
        }
    }
    
  3. Advanced Techniques: For more advanced animations, you can use SwiftUI's animatableData to create custom animations, or use shaders for complex visual effects. For example, in the session Create custom visual effects with SwiftUI, a ripple effect is created using shaders and a view modifier to animate based on external changes like gestures.

For a deeper dive into SwiftUI animations, you can refer to the session Enhance your UI animations and transitions, which covers various animation techniques and how to apply them in SwiftUI.

Create custom visual effects with SwiftUI

Create custom visual effects with SwiftUI

Discover how to create stunning visual effects in SwiftUI. Learn to build unique scroll effects, rich color treatments, and custom transitions. We’ll also explore advanced graphic effects using Metal shaders and custom text rendering.

Platforms State of the Union

Platforms State of the Union

Discover the newest advancements on Apple platforms.

Enhance your UI animations and transitions

Enhance your UI animations and transitions

Explore how to adopt the zoom transition in navigation and presentations to increase the sense of continuity in your app, and learn how to animate UIKit views with SwiftUI animations to make it easier to build animations that feel continuous.

What’s new in SwiftUI

What’s new in SwiftUI

Learn how you can use SwiftUI to build great apps for any Apple platform. Explore a fresh new look and feel for tabs and documents on iPadOS. Improve your window management with new windowing APIs, and gain more control over immersive spaces and volumes in your visionOS apps. We’ll also take you through other exciting refinements that help you make expressive charts, customize and layout text, and so much more.

SwiftUI essentials

SwiftUI essentials

Join us on a tour of SwiftUI, Apple’s declarative user interface framework. Learn essential concepts for building apps in SwiftUI, like views, state variables, and layout. Discover the breadth of APIs for building fully featured experiences and crafting unique custom components. Whether you’re brand new to SwiftUI or an experienced developer, you’ll learn how to take advantage of what SwiftUI has to offer when building great apps.