hero animation

Hero Animation

• 카드를 클릭시 카드가 확대되며 창으로 전환됩니다.

목차

1. 개요
2. matchedGeometryEffect
3. 사용한 변수
4. 사용한 상수
5. 스크린샷

개요

• matchedGeometryEffect 사용
• x 버튼을 눌러 dismiss 가능
• drag, scroll 로도 dismiss 가 가능함

matchedGeometryEffect

• namespace 로 애니메이션을 원하는 컴포넌트들을 매치시킵니다.
• isShow 로 카드뷰와 창의 나타남을 관리합니다.

    @Namespace var namespace
    @State private var isShow = false

사용한 변수

• viewSize : 드래그나 스크롤 시 뷰가 작아질때 사용
• scrollViewOffset : 스크롤 offset 추적
• dragState : 드래그 시 width 나 height 추적

    @State private var viewSize = 0.0
    @State private var scrollViewOffset: CGFloat = 0
    @State private var dragState: CGSize = .zero

사용한 상수

• fadeInOffset : 뷰가 나타날때 약간의 애니메이션(10 정도 위로 올라갑니다)
• dragStartRange : 양쪽 끝에서 60 범위에서만 드래그하여 dismiss 가능합니다.
• scrollStartRange : 최소 위에서 5 이상 내리기 시작해야 dismiss 인터렉션이 구현됩니다.
• dragLimit, scrollLimit : 설정한 Limit 보다 더 드래그 하거나 스크롤 해야 dismiss 가 됩니다.

    private let fadeInOffset: CGFloat = 10
    private let dragStartRange: CGFloat = 60
    private let scrollStartRange: CGFloat = 5
    private let dragLimit: CGFloat = 60
    private let scrollLimit: CGFloat = 40

스크린샷

기능	스크린샷
히어로 애니메이션
X 버튼 클릭 시 Dismiss
아래로 스크롤 시 Dismiss
드래그 시 Dismiss