Slide 14
Slide 14 text
.matchedGeometryEffectを利用したAnimation処理
// Grid正方形の表示要素
HStack {
VStack {
Text(name)
.foregroundColor(.white)
// 👉 ① Animation対象となるテキスト要素（遷移元）
.matchedGeometryEffect(id: effectTitleID, in: namespace)
}
.frame(width: standardRectangle, height: standardRectangle)
.background(
Rectangle()
// 👉 ② Animation対象となる矩形要素（遷移元）
.matchedGeometryEffect(id: effectShapeID, in: namespace)
.onTapGesture {
withAnimation(springAnimation) {
selectedMaterial = material
}
}
)
Spacer()
}
// 拡大時のView全体要素
VStack {
// (1) ヘッダー表示をするためのView要素を配置する
HStack {
Text(name)
.foregroundColor(.white)
// 👉 ① Animation対象となるテキスト要素（遷移先）
.matchedGeometryEffect(id: effectTitleID, in: namespace)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
.padding(.top, 20.0)
Spacer()
Button(action: {
withAnimation(springAnimation) {
selectedMaterial = nil
}
} label: {
Text("× 閉じる")
})
}
.padding(.horizontal, 8.0)
// (2) SceneKitを仕込んだView要素を配置する
DetailView(scene: materialScene)
}
// 表示エリアは「横幅いっぱい＆縦400px」を確保する
.frame(maxWidth: .infinity, maxHeight: 400.0)
.background(
Rectangle()
// 👉 ② Animation対象となる矩形要素（遷移先）
.matchedGeometryEffect(id: effectShapeID, in: namespace)
)
一意なID名と@Namespaceで定義する名前空間との紐付けをしている点がポイント（矩形＆テキストが対象）
LazyVGrid(columns: gridColumns, spacing: 8.0) {
ForEach(MaterialFactory.getMaterials()) { material in
// … 紐づけるID名を組み立てる + 一覧表示処理（省略）
}
}
補足: 一覧表示部分の処理イメージ
嬉しいポイント
複数要素にAnimation
処理を適用させたい場
合でも名前空間と一意
なIDがあれば実現可能
であること。