SwiftUI Animations Animation Curves

SwiftUI Animations: Animation Curves

Choose timing functions like .easeIn, .easeOut, .easeInOut, and .linear to shape motion.

Syntax

Timing curves: withAnimation(.easeInOut(duration: 1)) { state = ... }.

Choose .easeIn, .easeOut, .easeInOut, or .linear to change acceleration.

EaseIn vs easeOut

Tap buttons to move the dot with different curves. .easeIn starts slow and speeds up; .easeOut starts fast and slows down.

import SwiftUI

struct CurvesDemo: View {
  @State private var x: CGFloat = 0
  var body: some View {
    VStack(spacing: 12) {
      HStack { Circle().frame(width: 24, height: 24).offset(x: x); Spacer() }
      HStack(spacing: 12) {
        Button("EaseIn") { withAnimation(.easeIn(duration: 1)) { x = 240 } }
        Button("EaseOut") { withAnimation(.easeOut(duration: 1)) { x = 0 } }
      }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { CurvesDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

In the example above, the dot moves with different curves using .easeIn and .easeOut.

Linear vs easeInOut

Compare a constant-speed (.linear) motion with a smooth accelerate/decelerate (.easeInOut).

import SwiftUI

struct CurvesCompareDemo: View {
  @State private var go = false
  var body: some View {
    VStack(spacing: 16) {
      HStack { Circle().frame(width: 16, height: 16).offset(x: go ? 240 : 0); Spacer() }
        .animation(.linear(duration: 1), value: go)
      HStack { Circle().frame(width: 16, height: 16).offset(x: go ? 240 : 0); Spacer() }
        .animation(.easeInOut(duration: 1), value: go)
      Button(go ? "Reset" : "Animate") { go.toggle() }
    }
    .padding()
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { CurvesCompareDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene { WindowGroup { ContentView() } }
}

In the example above, the dot moves with different curves using .linear and .easeInOut.