소개

마지막 애니메이션을 바탕으로 matchedGeometryEffect()를 사용하여 약간 복잡한 애니메이션을 만듭니다.

목차

matchedGeometryEffect

요약

참고문헌

matchedGeometryEffect · matchedGeometryEffect() --- If inserting a view in the same transaction that another view with the same key is removed, the system will interpolate their frame rectangles in window space to make it appear that there is a single view moving from rom its new position.

・즉, 애니메이션을 작성할 때에, 최초의 상태와 끝의 상태를 정의하면, 프로그램이 마음대로 움직여 준다고 하는 것입니다.
・예를 들면, 이하와 같이 타원은 처음에 가로 100 세로 200으로서, 탭 되면 가로 200 세로 100으로 바뀌어 갔습니다. 그러나 변화하는 동안 가로 세로는 특별히 지정되지 않았습니다.

struct ContentView: View {
    @State var expand = false

    var body: some View {
        Ellipse()
            .fill(Color.blue)
            .frame(width: expand ? 100 : 200, height: expand ? 200 : 100)
            .offset(y: expand ? -250 : 0)
            .animation(.easeIn)
            .onTapGesture {
                self.expand.toggle()
            }
    }
}

　　 　

・실제로 전회 만든 카드로 matchedGeometryEffect() 를 시험해 갑시다.
・ CourseItem() 는 2회 불려 각각 초기 상태와 끝 상태를 나타냅니다.isSourse는 뷰를 그룹의 다른 뷰의 지오메트리 소스로 사용할 때 True를 지정합니다.show.toggle() 가 탭되면 Bool 가 바뀝니다.

CoursesView.swift

struct CoursesView: View {
    @State var show = false
    @Namespace var namespace

    var body: some View {
        ZStack {
            CourseItem()
                .matchedGeometryEffect(
                    id: "Card", in: namespace, isSource: !show
                )
                .frame(width: 335, height: 250)
            if show {
                CourseItem()
                    .matchedGeometryEffect(id: "Card", in: namespace)
                    .transition(.opacity)
                    .zIndex(1)
                    .edgesIgnoringSafeArea(.all)
            }
        }
        .onTapGesture {
            withAnimation(.spring()) {
                show.toggle()
            }
        }
    }
}

·이 시간 동안 만든 CourseRow()· 상태가 끝난 후 목록을 추가하기 때문에 두 번째로 호출 된 CourseRow()를 CourseItem()에 밀어 넣습니다.
또, 전체 화면으로 하고 싶지 않기 때문에, 세로를 300으로 합니다.

CoursesView.swift

ScrollView {
     CourseItem()
          .matchedGeometryEffect(id: "Card", in: namespace)
          .frame(height: 300)
}

・ ScrollView 로 ForEach 가 표시됩니다.

CoursesView.swift

ForEach(0 ..< 20) { item in
      CourseRow()
}

　

요약 · 눈치채고 있을지도 모릅니다만, 리스트의 사라지는 타이밍이 늦어, 다음번은 이것을 해결합니다. 소스 코드 Github

참고문헌

Design Code --- SwiftUI for iOS 14

htps //w w. 안쵸 rbぉgs. 이 m /에서 원하는 ls / 5