ヒーロートランジションのためのmatchedGeometryEffect
namespaceとmatched IDを使い、View間でシームレスなヒーローアニメーションを作成します。
「ヒーロートランジションのためのmatchedGeometryEffect」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
matchedGeometryEffectとは何ですか？
matchedGeometryEffectは、2つの状態間でビューの位置とサイズをアニメーションさせ、「ヒーロー」トランジションを作成します。
struct HeroDemo: View {
@Namespace private var ns
@State private var expanded = false
var body: some View {
if expanded {
BigCard().matchedGeometryEffect(id: "card", in: ns)
} else {
SmallCard().matchedGeometryEffect(id: "card", in: ns)
}
}
}Namespaceの作成
親ビューで@Namespaceを宣言します。すべての対象ビューでこのnamespaceを共有します。
struct ParentView: View {
@Namespace private var heroNamespace
}モディファイアの適用
ソースビューと遷移先ビューの両方に、同じidを指定した.matchedGeometryEffect(id:in:)を適用します。
Image("cover")
.matchedGeometryEffect(id: "albumArt", in: heroNamespace)トランジションの開始
状態の変更をwithAnimationで囲むと、2つのビュー間のジオメトリをアニメーションさせられます。
Button("Expand") {
withAnimation(.spring()) {
isExpanded.toggle()
}
}リストから詳細画面へのヒーロー遷移
典型的なヒーローパターンです。リスト項目をタップすると、matchedGeometryEffectを使って全画面の詳細画面へ展開します。
ForEach(items) { item in
ThumbnailRow(item: item)
.matchedGeometryEffect(id: item.id, in: ns)
.onTapGesture { withAnimation { selected = item } }
}
if let sel = selected {
DetailView(item: sel)
.matchedGeometryEffect(id: sel.id, in: ns)
}isSourceパラメータ
2つのビューで同じidを共有する場合、起点にはisSource: true（デフォルト）を指定し、遷移先にはisSource: falseを指定します。
SmallImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: false)アンカーとサイズのプロパティ
一致させるアンカーポイントとジオメトリのプロパティ（位置やサイズ）をカスタマイズします。
.matchedGeometryEffect(
id: "box",
in: ns,
anchor: .center,
properties: [.position, .size]
)AnyTransitionとの組み合わせ
ヒーローアニメーションを.transitionと組み合わせると、コンテンツのフェードインやスライドインの方法も制御できます。
DetailView()
.matchedGeometryEffect(id: "card", in: ns)
.transition(.opacity)リスト内の複数のヒーロー
項目の識別子から一意のIDを生成して使用すると、複数の独立したヒーローアニメーションを実行できます。
ForEach(products) { p in
ProductCard(p)
.matchedGeometryEffect(id: p.id, in: ns)
}よくある落とし穴
同じIDを持つ2つのビューを同時に表示してはいけません。常にどちらか一方だけを表示しないと、レイアウトの不具合が発生します。
// Wrong: both views visible at same time
Small().matchedGeometryEffect(id: "x", in: ns)
Large().matchedGeometryEffect(id: "x", in: ns)
// Correct: use if/else or ZStack with opacity togglingパフォーマンスのヒント
matched viewは軽量に保ってください。matched view内に複雑な階層を含めると、アニメーション中にフレーム落ちが発生することがあります。
// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frame理解度チェック
ヒーロートランジションで2つのビューをソースと遷移先として関連付けるには、何が必要ですか？
レッスンのまとめ
@Namespaceと.matchedGeometryEffect(id:in:)を使ってヒーロートランジションを作成します。状態の変更をwithAnimationで囲みます。レイアウトの競合を避けるため、一度に表示するmatched viewは1つだけにしてください。
よくある質問
「ヒーロートランジションのためのmatchedGeometryEffect」レッスンは無料ですか？
はい。「ヒーロートランジションのためのmatchedGeometryEffect」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「ヒーロートランジションのためのmatchedGeometryEffect」で何を学びますか？
namespaceとmatched IDを使い、View間でシームレスなヒーローアニメーションを作成します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ヒーロートランジションのためのmatchedGeometryEffect」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 暗黙的アニメーションと明示的アニメーション
- ヒーロートランジションのためのmatchedGeometryEffect
- カスタムAnimatableModifierとAnimatable
- 高パフォーマンス描画のためのTimelineViewとCanvas