SwiftUI Animations Animation Curves

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.

Example

Demo.swift

ContentView.swift

App.swift

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()
  }
}

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).

Example

Demo.swift

ContentView.swift

App.swift

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()
  }
}