SwiftUI의 Animation

SwiftUI에서 애니메이션 동작을 추가하기 위해서는 withAnimation이라는 유틸리티 함수를 사용합니다. 애니메이션을 적용하는 코드 블록을 감싸서 상태 변화를 부드럽게 보이도록 만들 수 있습니다.

 

1. withAnimation 이란?

withAnimation은 상태 값이 변경될 때 SwiftUI가 해당 변경사항을 애니메이션으로 표현하도록 지시하는 함수입니다. SwiftUI는 선언형 방식을 사용하기 때문에 상태가 변경되면 UI가 자동으로 갱신되는데, 이 과정에서 withAnimation을 사용하면 상태 변경에 따른 UI 업데이트를 부드럽게 연결합니다.

struct WithAnimationExample: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Button("Toggle") {
                withAnimation(.spring()) {
                    isExpanded.toggle()
                }
            }
            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: isExpanded ? 200 : 100)
        }
    }
}

 

위 코드는 다음 과정을 거칩니다.

1. @State로 선언된 isExpanded가 변경되어 상태 변화를 감지합니다.
2. UI를 다시 그리기 위해 렌더링 트리를 재구성합니다. 이 때 원본과 변경된 부분의 차이점을 확인합니다.
3. 변경된 차이점에 대해 애니메이션을 적용합니다.
4. 애니메이션이 완료되면 최종 상태로 UI를 업데이트 합니다.

 

2. 동작 원리

 

• Transaction 생성:
  • withAnimation 함수를 호출하면, 지정된 애니메이션 설정을 포함하는 새로운 Transaction 객체가 생성됩니다.
• 환경(Environment)에 Transaction 전달:
  • 생성된 Transaction 객체는 현재 뷰 계층의 환경에 전달되며, 하위 뷰로 전파됩니다. 이를 통해 뷰 계층 전체에서 동일한 애니메이션 컨텍스트를 공유하게 됩니다.
• 상태 변화 적용:
  • withAnimation 블록 내에서 상태 변화를 일으키면, 해당 상태 변화는 앞서 생성된 Transaction 객체와 연계되어 처리됩니다.
• 애니메이션 실행:
  • SwiftUI는 Transaction 객체에 포함된 애니메이션 정보를 기반으로 상태 변화에 따른 뷰의 변화를 애니메이션으로 표현합니다.

 

---

References:

https://developer.apple.com/videos/play/wwdc2023/10156/