https://developer.apple.com/videos/play/wwdc2023/10156/
*위 wwdc 영상을 보고 정리했습니다.
View에는 종속성 그래프가 존재 한다.
그래서 @State로 선언된 변수가 변경되면 의존관계에 따라 하나씩 변경되는데 이때 한 노드를 Attribute라고 하고, 이 Attribute가 Animatable할 때 애니메이션이 적용된다.
애니메이션이 적용될때 Transaction이 열리고 변경되어야할 Body가 호출되어 적용되면 트랜잭션이 닫힌다.
model값은 1.0에서 1.5로 바로 변경된 반면 presentation값은 트랜잭션이 종료된후 애니메이션 보간이 적용되어 보여진다.
Animatable
무엇을 Animation 시킬 건지
원하는 View에 직접 Animatable 프로토콜을 채택해 읽고-쓰기가 가능한 벡터 형태의 animatableData를 등록해주면 애니메이션을 적용해줄 수 있다.
View(body) 전체를 Animatable을 채택하면 각 프레임마다 body의 속성이 변경되어 적용된다. 이러면 Offset의 Angle에 따라 돌아가는 효과를 만들 수도 있긴한데 비용이 더 든다.
Animation
애니메이션을 적용하는 보간 알고리즘
일반적으로는 세가지로 나뉜다.
- Timing Curve
- Spring
- Higher Order
1. Timing Curve
-
EaseInOut과 같이 곡선을 조절하여 만드는 애니메이션
-
UniCurve와 지속시간을 결정하여 만든다. UniCurve는 베지어 곡선 기반의 제어점을 조절한 곡선 형태를 따른다.
2. Spring
- Spring Animation의 지속시간(duration)과 Bound 정도로 만드는 애니메이션
- 기존 mass,stiffness,damping으로 만드는 방법에서 더 직관적으로 변한게 위의 방식이다.
- Swift가 제공하는 템플릿으론 smooth,snappy,bouncy가 있다.
- smooth가 withAnimaiton의 기본값으로 설정될 정도로 Spring 애니메이션을 권장한다.
3. Higher Order
- 애니메이션의 Speed, Delay, Repeat Count를 설정할 수 있다.
4. Custom
위 3가지 방법 외에 Custom Animation을 설정할 수 있다.
Custom Animation을 설정하기 위해서는 animate, shouldMerge, velocity 함수를 만들어줘야한다.
animate는 Vector의 결과값을 반환하고, animation이 종료되면 nil을 반환한다.
shouldMerge의 경우 위 그림과 같이 애니메이션 진행 도중 다른 애니메이션이 실행되어야한다면 이를 합성할지 전달하는 함수이다.
velocity는 애니메이션이 병합될 때 원래 애니메이션의 속도를 유지할지를 결정해 줄 수 있다.
Transaction
트랜잭션은 애니메이션과 관련된 Context를 제공한다.
이런식으로 애니메이션의 효과를 설정해줄 수 있다.
하지만 이렇게 직접 원하는 vlaue와 연관된 애니메이션을 지정해주기 위해 animation modifier를 사용하는 방식을 더 권한다.
이런 식으로 수정자를 두개 추가하고 순서에 따라 같은 value를 사용해도 다른 효과를 줄 수도 있다.
애니메이션 클로저 안에 수정자를 넣으면서 예상치 못한 애니메이션의 변경 효과를 줄일 수 있다.
