들어가며
먼저 제 애니메이션 게시글을 보지 않으셨다거나 SwiftUI의 애니메이션에 대해 생소하다면 이전 글을 보는것을 추천드려요!
이전 글에서 애니메이션에 대해서 이야기 했었죠
이번 시간에는 SwiftUI에서 애니메이션이 어떤 구조로 적용되는지만 간단하게 알아 볼게요!
보간법?
컴포넌트의 위치나 크기의 차이값을 보간법으로 계산해서 변화를 시각적으로 표현한다.
애플에서 제공하는 WWDC영상에서 나온 내용입니다.
SwiftUI는 보간법을 이용해서 애니메이션을 적용한다고 합니다.
그렇다면 보간법이란 무엇일까요?
일반적으로 보간법은 수학에서 주로 사용하는 용어입니다.
우리가 중고등학교 수학시간에 그래프를 그릴때 점 두개를 주고 공식에 일치하는 선을 그리는 일을 해본적이 다들 한번쯤은 있으시겠죠?
이처럼 보간법은 두 점을 연결하는 방법을 의미합니다다.
여기서 말하는 연결은 궤적(Trajectory)를 생성한다는 의미를 가집니다.
여기서 선을 연결하는 방법은 개발자가 직접 지정할 수 있고 SwiftUI가 자동으로 그리는것을 이용하는 방법도 있죠
이전 시간에 작성한 방법이 SwiftUI가 자동으로 제공하는 방식을 사용한 것입니다.
SwiftUI는 굉장히 똑똑한 친구라서 뷰의 상태가 변경되면 그 차이값을 자동으로 계산해서 부드럽게 시각적으로 표현해줍니다.
Animatable
그렇다면 SwiftUI는 해당 뷰가 애니메이션을 적용해야하는 존재인지 어떻게 구별할 수 있을까요?
애플에서 말하길
View를 렌더링 하다가 Animatable한 Effect를 렌더링하는 순간이 오면 애니메이션을 적용한다
라고 합니다.
그렇다면 SwiftUI는 Animatable한 존재를 어떻게 구별할까요?
우리는 이미 Animatable한 존재를 지정하는 방법을 알고 있습니다.
바로 애니메이션 지정하는 과정이 바로 그것입니다.
이전에 애니메이션을 적용하기위해서 .animation모디파이어를 사용하거나 withAnimation클로저를 사용한다고 했었죠?
바로 이 과정이 애니메이션을 발생시켜라고 하는 일종의 Flag나 Trigger 역할을 한다고 보시면 됩니다.
예시
예를 들어 다음 과 같은 원의 위치를 변경하는 뷰가 있다고 합시다.
이 뷰의 렌더링 과정은 아래 이미지와 같습니다.
- 모디파이어도 적용해서 Circle을 그립니다.
- Button을 그립니다.
- 버튼이 실행되고 상태변수의 값이 변경됩니다.
- 상태변수의 값이 변경되면 SwiftUI는 자동으로 해당부분의 화면을 다시 렌더링합니다.
- 상태변수와 연관된 컴포넌트인 원을 다시 그립니다.
- 이때 원에는 .animation모디파이어가 적용되어있으니 이때 원에 애니메이션을 적용해 줍니다.
마무리
SwiftUI에너 화면을 그리는 방법을 알아보았습니다.
내부적으로 보간법이라는것을 이용해서 애니메이션 화면을 적용합니다.
이전에 이야기 했던 .animation모디파이어나 withAnimation클로저가 일종의 애니메이션 동작 플래그 역할을 한다는것을 알고 갑시다!
출처
