소개

전회는 카드를 탭하면, 리스트를 표시되게 했지만, 리스트의 애니메이션을 지연시켜 주었으면 한다.
이번에는 이 과제를 바탕으로 진행할 수 있습니다. 완성품의 이런 느낌입니다. ↓

목차

transition delay

요약

참고문헌

transition delay · 애니메이션을 늦추려면 delay() 라는 인스턴스 메서드를 사용합니다. ・약간 복잡하게 보입니다만, 하나씩 분해하면, 1개의 transition 가 있어, 이 transition 는 복수의 조건이 붙여지고 있습니다. 첫 번째 조건은 opacity(투명), 두 번째는 animation()(애니메이션 타이밍). 애니메이션의 타이밍은 무엇인가라고 하면, spring(탄력)과 delay(지연). .transition ( AnyTransition.opacity.animation ( Animation.spring().delay(0.3) ) )

・열기 애니메이션이 생겼지만, 닫는 쪽도 할 필요가 있습니다.
・또, 이번 케이스에서는 비상칭의 transition이므로, `asymmetric(insertion: , removal:) 를 사용할 수 있습니다. ( 애플이 제공한 코드 예제도 확인해 봅시다. )

CoursesView.swift

.transition(
      .asymmetric(
          insertion: AnyTransition.opacity.animation(
                Animation.spring().delay(0.3)
          ),
          removal: AnyTransition.opacity.animation(
                .spring()
          )
       )
)

· 두 번째 카드를 추가합니다. 물론 두 번째 카드에 대해 아무 작업도 수행하지 않으면 목록과 두 번째 카드를 덮게됩니다.
우선은 background 를 화이트로 해, 계속은 다음 번 진행해 갑니다.
・또, 카드를 복수를 추가해 나가므로, 카드를 전부 ScrollView 에 포장해, 탭 된 후의 영역도 결정하고 싶기 때문에, frame(maxWidth: .infinity) 를 사용합니다.

CoursesView.swift

ScrollView {
   VStack(spacing: 20) {
        CourseItem()
            .matchedGeometryEffect(
                id: "Card", in: namespace, isSource: !show
            )
            .frame(width: 335, height: 250)
         CourseItem()
            .frame(width: 335, height: 250)
    }
    .frame(maxWidth: .infinity)
}

요약 소스 코드 Github

참고문헌

Design Code --- SwiftUI for iOS 14