iOS トランジション

🔹 トランジション（Transition）とは

簡単に言うと：
画面A → 画面B へ移動する時の “見せ方” のことです。

例えば：
フェードイン（ゆっくり現れる）
スライド（横にスッと移動）
スケール（拡大・縮小しながら表示）

🔹 SwiftUIでのトランジション例
SwiftUI では .transition() モディファイアで簡単に書けます。

✅ 基本例：フェードイン・フェードアウト

import SwiftUI

struct ContentView: View {
    @State private var showBox = false

    var body: some View {
        VStack(spacing: 20) {
            Button("切り替え") {
                withAnimation {
                    showBox.toggle()
                }
            }

            if showBox {
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 200, height: 200)
                    .transition(.opacity) // ← フェードイン/アウト
            }
        }
    }
}

🌀 withAnimation { … }
➡️ アニメーション付きで状態を切り替える、という意味です。

✅ 別のトランジション例
トランジション名 動き
.slide 横からスライドイン／アウト
.scale 拡大・縮小
.move(edge: .bottom) 下から出てくる
.opacity フェードイン／アウト
.asymmetric 表示と非表示で違う動き

例：

.transition(.move(edge: .bottom))

✅ 複合トランジション

2つ以上組み合わせも可能です：

.transition(.move(edge: .bottom).combined(with: .opacity))

これで「下からスライドしながらフェードイン」が実現できます。

🔹 Navigationトランジション

もう一つ、「NavigationView」などでページ遷移するときにも自動的にトランジションが入ります。

例：

NavigationLink(destination: NextView()) {
    Text("次へ")
}

➡️ デフォルトで 右から左へスライドイン
（戻るときは左から右へ）

UIKit時代だと UIViewController の present(_:animated:) などを使ってトランジションを細かく制御しましたが、
SwiftUI では シンプルな構文 で済むようになっています。

🔹 まとめ
用語 意味
トランジション（Transition） 画面や要素が出入りする動き（アニメーション）
アニメーション（Animation） 値や状態の変化に伴う動き
withAnimation 状態変更をアニメーションで包む構文