[SwiftUI] WWDC24 Enhance your UI animations and transitions

Enhance your UI animations and transitions 세션을 정리한 글입니다.

 

Transitions

iOS 18에는 새 확대/축소 전환 효과가 있습니다 이 새 전환 효과를 사용하면 탭하는 셀이 수신 뷰로 바뀝니다 단순한 시각적 모습이 아니라 지속적으로 상호 작용하므로 처음부터 또는 전환 중에 탭하고 드래그해서 이동할 수 있게 됩니다

확대/축소 전환 설정

두 가지 작업을 해야 합니다

첫 번째, 원한다는 표현을 합니다

즉, 표시된 뷰에 navigationTransitionStyle 편집자를 추가하고 확대/축소 전환을 지정합니다

두 번째로, 이 편집자를 소스 뷰에 연결하여 시스템이 확대/축소할 뷰를 알 수 있게 합니다

두 위치 모두에서 동일한 식별자와 네임스페이스를 지정합니다

 

UIKit으로 전환적용시에도 비슷합니다.

preferredTransition을 사용하여 적용하고 push해주면 됩니다.

func showEditor(for bracelet: Bracelet) {
    let braceletEditor = BraceletEditor(bracelet)
    braceletEditor.preferredTransition = .zoom { context in
        let editor = context.zoomedViewController
            as! BraceletEditor
        return cell(for: editor.bracelet)
    }
    navigationController?.pushViewController(braceletEditor, animated: true)
}

전달된 클로져는 확대시 실행되고 축소시 다시실행되며 안정적 식별자를 캡처해야합니다.

따라서 뷰를 직접캡처하는 대신에 뷰를 가져오는데 사용하는 모델을 사용합니다.

컬렉션뷰 같이 소스뷰가 재사용될 수 있는경우에 중요함

 

리스트에서 다른 뷰로 스와이프하여 다른 뷰로 변경될수도있음

변경된 현재뷰로 축소하려면 클로저에 전달된 컨텍스트를 사용하여 변경된 현재 뷰를 검색함

 

UIKit appearance callback

푸시가 완료되면 Disappeared 상태에서 시작한 다음 전환 중에 Appearing을 거쳐 viewWillAppear, isAppearing didAppear를 호출하고 전환이 완료되면 Appeared 상태로 끝납니다

마찬가지로, 팝업을 실행하여 완료되면 편집기는 전환 중에 Disappearing 상태를 거쳐 이동한 다음 다시 Disappeared 상태로 끝납니다 뒤로 버튼을 탭하거나 대화식 스와이프로 팝업이 시작된 것도 마찬가지입니다

 

 

조금만 드래그하고 있으면 팝업 전환이 시작될 때 편집기가 Disappearing 상태로 이동합니다

그런 다음 팝업이 취소되도록 손가락을 떼면 애니메이션이 완료될 때까지 실행되지만 마지막에는 뷰 컨트롤러가 곧바로 Appearing 상태로 이동한 다음 실행 루프에서 한 번 회전해 Appeared 상태로 이동합니다

 

Disappeared 상태에 있는 처음상태로 돌아가 보겠습니다

푸시를 시작했고 이제 뷰는 Appearing 상태입니다

이제 푸시 도중에 뒤로 버튼을 탭하거나 뒤로 스와이프하여 팝업을 시작하면 

이 경우 푸시가 취소되지 않습니다

대신 푸시가 즉시 완료되며 편집기가 곧바로 Appeared 상태로 전환되고

실행 루프의 동일한 방향 전환 때 팝업 전환이 시작되고 Disappearing 상태로 이동

그리고 여기부터 완료되거나 취소될 수 있는 일반적인 팝업 전환입니다

 

푸시 취소는 팝업 취소 방법과 다르며 이는 의도적인 결과입니다

개념적으로 시스템은 중단 푸시를 취소하지 않습니다

그 대신에 푸시는 항상 팝업으로 변환됩니다

푸시된 뷰 컨트롤러의 관점에서 볼 때 항상 Appeared 상태에 도달하는데

시스템이 항상 그랬던 것처럼 전체 콜백 주기로 실행된다는 걸 의미합니다

 

 

전환 중에 있는 것과 전환 중이 아닌 것을 다르게 처리하려고 하지 마세요

전환이 진행되면 탭 처리기는 푸시를 호출하지 못합니다 전환 실행 여부에 관계없이 푸시를 호출하면 됩니다

 

 

임시 전환 상태를 최소한으로 유지하세요

상태가 적을수록 다른 코드가 전환 상태에 종속될 가능성이 줄어듭니다 정리할 일이 하나 줄어듭니다

하지만 전환 중에 상태를 추적해야 하는 경우 viewDidAppear 또는 viewDidDisappear로 재설정합니다 이렇게 하면 전환이 끝날 때 호출되도록 보장됩니다

SwiftUI aniation

iOS18부터 SwiftUI애니메이션 타입을 UIKit에도 적용 할 수 있음

CALayer와 작동하는 경우 이 새 API를 사용할 때 고려할 몇몇 의미가 있습니다

기존 UIKit API는 CAAnimation을 생성한 다음 뷰 레이어에 추가합니다

하지만 SwiftUI 애니메이션은 CAAnimation을 생성하지 않으며 뷰의 레이어 프레젠테이션 값에 직접 애니메이션을 적용합니다

이러한 프레젠테이션 값은 여전히 프레젠테이션 레이어에 반영됩니다

 

Animating representables

BeadBoxWrapper가 UIKit으로 구현 여부에 관계없이 수행하는 자연스러운 방법은 바인딩에 애니메이션 편집자를 추가하는 것입니다

BeadBoxWrapper가 SwiftUI로 구현된다면 작동하게 됩니다

하지만 BeadBoxWrapper는 뚜껑(블러처리된 뷰) 아래 UIKit으로 구현되므로 애니메이션을 직접 연결해야 합니다

컨텍스트에서 새로운 ‘animate‘ 메서드를 사용했는데

이를 통해 이 업데이트와 관련된 트랜잭션의 애니메이션을 ‘updateUIView‘ 메서드에서 변경한 UIView에 적용할 수 있습니다

 

Gesture-driven animations

구슬이동에 애니메이션을 적용하려면 구슬이동 속도를 기반으로 스프링 속도를 계산해서 최종위치까지 이동할 거리로 나눠서 단위속도로 변환해야함

SwiftUI애니메이션은 제스처중 서로 병합하여 제스처가 끝날때속도를 보존하는 기능을이미 갖추고있음

화면에서 드래그하면 손가락 움직임 시 제스처가 계속 변경 이벤트를 실행합니다

각 이벤트는 새 ‘.interactiveSpring‘ 애니메이션을 생성하며 각 새 애니메이션은 마지막의 대상을 변경합니다

그 다음 제스처가 끝나면 최종 스프링 애니메이션이 생성됩니다