【初心者】Swift UIを勉強する その⑥ ーーーtransitionsとanimations

はじめに

今日からはアニメーションの部分に入っていきます。
宣言型シンタックスの強さはアニメーションの実装に十分伝わってくれました。

目次

1. Viewの切り替え
2. まとめ
3. 参考文献

Viewの切り替え

・CourseItem()はZStackに囲まれたことによって、複数のカードがある場合は重なっていくことになります。
・２枚目のカードがデフォルトの状態で表示させたくないため、状態を管理できるように@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がtapされたら必要な処理を追加できます。ここは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