암시적 애니메이션과 명시적 애니메이션

두 가지 애니메이션 스타일

struct Demo: View {
  @State private var scale = 1.0
  var body: some View {
    Circle().scaleEffect(scale)
  }
}

.animation을 사용한 암시적 애니메이션

Circle()
  .scaleEffect(scale)
  .animation(.easeInOut(duration: 0.3), value: scale)

암시적 애니메이션 시작하기

Button("Grow") {
  scale = 2.0  // .animation fires automatically
}

withAnimation을 사용한 명시적 애니메이션

Button("Animate") {
  withAnimation(.spring()) {
    scale = 2.0
    offset = 50
  }
}

여러 프로퍼티 애니메이션 처리하기

withAnimation(.easeOut(duration: 0.5)) {
  isExpanded = true
  rotation = 90
  opacity = 0.5
}

애니메이션 타입

.spring(response: 0.4, dampingFraction: 0.6)
.easeInOut(duration: 0.3)
.linear(duration: 0.5)
.timingCurve(0.2, 0.8, 0.2, 1.0, duration: 0.4)

애니메이션 비활성화하기

Circle()
  .scaleEffect(scale)
  .animation(.none, value: scale)  // no animation

애니메이션 우선순위

withAnimation(.linear) {
  value = true  // linear wins over any .animation on subviews
}

반복 애니메이션

.animation(
  .easeInOut(duration: 0.8).repeatForever(autoreverses: true),
  value: pulsing
)

지연과 속도

.animation(.spring().delay(0.2).speed(1.5), value: flag)

암시적 애니메이션과 명시적 애니메이션 선택하기

// Implicit: simple, single view
.animation(.easeIn, value: isVisible)
// Explicit: multi-property or cross-view
withAnimation { a = 1; b = 2 }

빠른 확인

강의 요약