소개

오늘부터는 애니메이션 부분에 들어갑니다.
선언형 신택스의 힘은 애니메이션의 구현에 충분히 전해 주었습니다.

목차

View 전환

요약

참고문헌

View 전환 CourseItem() 은 ZStack 에 둘러싸인 것에 의해, 복수의 카드가 있는 경우는 겹쳐 가게 됩니다. ・2번째의 카드가 디폴트의 상태로 표시시키고 싶지 않기 때문에, 상태를 관리할 수 있도록 @State 를 더합니다. CoursesView.swift struct CoursesView: View { @State var show = false var body: some View { ZStack { CourseItem() .frame(width: 335, height: 250) if show { CourseItem() } } } } · onTapGesture를 사용하여 View가 탭되면 필요한 처리를 추가 할 수 있습니다. 여기는 ture와 false와의 교환을 실시합니다. CoursesView.swift .onTapGesture { show.toggle() } · 다음과 같이 animation은 너무 갑자기 나타나므로 animation이 가진 easeIn을 사용하면 원활하게됩니다. CoursesView.swift .onTapGesture { show.toggle() } .animation(.easeIn)

・물론 animation은 커스텀이 가능합니다. transiton() 에는 move 또는 slide 등이 있습니다.
・또, 이미 위화감을 느끼고 있을지도 모르지만, 원래의 카드가 사라지는 타이밍은 조금 늦어지고 있습니다. zIndex() 를 사용하면 중복 뷰의 표시 순서를 제어할 수 있습니다.
・animation은 SafeArea에 포함되지 않기 때문에, 전체화면으로 하고 싶으면 edgesIgnoringSafeArea(.all) 를 사용할 수 있습니다.

CoursesView.swift

if show {
     CourseItem()
   // .transition(.slide)
      .transition(.move(edge: .top))
      .zIndex(1)
      .edgesIgnoringSafeArea(.all)
}

　

요약 ・코딩보다, Adobe XD를 사용해 디자인을 하고 있는 기분인 것 같습니다. 소스 코드 Github

참고문헌

Design Code --- SwiftUI for iOS 14