matchedGeometryEffect
是 SwiftUI 中的一个强大工具,用于在两个视图之间创建基于几何形状的动画。当两个视图的几何形状(如大小、位置)匹配时,matchedGeometryEffect
可以平滑地在它们之间过渡动画。
matchedGeometryEffect
可以创建非常平滑的动画效果,提升用户体验。matchedGeometryEffect
可以大大简化代码。matchedGeometryEffect
主要有两种类型:
matchedGeometryEffect
常用于以下场景:
以下是一个使用 matchedGeometryEffect
实现列表项到详情页缩放动画的示例:
import SwiftUI
struct ContentView: View {
@State private var selectedID: UUID?
var body: some View {
NavigationView {
List(0..<10) { index in
NavigationLink(
destination: DetailView(id: selectedID ?? UUID()),
tag: UUID(),
selection: $selectedID) {
Text("Item \(index)")
.matchedGeometryEffect(id: "item\(index)", in: .navigation)
}
}
}
}
}
struct DetailView: View {
let id: UUID
var body: some View {
Text("Detail View")
.matchedGeometryEffect(id: "item\(id)", in: .navigation)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
matchedGeometryEffect
的 id
不匹配或未正确设置。matchedGeometryEffect
的 id
在源视图和目标视图中完全一致。@StateObject
或 @ObservedObject
管理数据。通过以上信息,你应该能够更好地理解和使用 matchedGeometryEffect
实现缩放动画。如果有更多具体问题,欢迎继续提问。
领取专属 10元无门槛券
手把手带您无忧上云