-
使用withAnimation和@State属性显示新的View 以及移除新的View 来达到跳转和返回的效果
.transition(.opacity)淡出淡出效果
.transition(.slide)平移滑动效果
.transition(.scale)缩放效果
import SwiftUI
struct ContentView: View {
@State private var showStack = false
var body: some View {
ZStack {
Color(.systemBackground)
.ignoresSafeArea()
VStack {
Button("显示视图") {
withAnimation {
showStack = true
}
}
.font(.title)
}
// 显示滑入滑出的视图
if showStack {
SlideInView(showStack: $showStack)
.transition(.asymmetric(
insertion: .move(edge: .trailing),//这里控制视图进入的方向
removal: .move(edge: .leading)//这里控制视图退出的方向
))
.zIndex(1) // 确保它在上面 ***这个是重点如果没有实现这个代码点击返回的时候就不会触发 removal: .move(edge: .leading)动画效果
}
}
}
}
struct SlideInView: View {
@Binding var showStack: Bool
var body: some View {
VStack {
Spacer()
Text("我是滑入的视图")
.font(.title)
.padding()
Button("关闭") {
withAnimation {
showStack = false
}
}
.padding()
Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue.opacity(0.9))
.foregroundColor(.white)
}
}
2. 缩放:.scale
.transition(.scale)
插入时从小变大,移除时从大变小。
你还可以带上比例因子:
.transition(.scale(scale: 0.1, anchor: .center))
3. 旋转加缩放(组合):.scale.combined(with: .rotationEffect(...))
SwiftUI 不直接支持 .rotationEffect 作为过渡,但你可以用 .modifier(...) 自定义:
.transition(
.modifier(
active: MyTransitionModifier(scale: 0.2, opacity: 0.0),
identity: MyTransitionModifier(scale: 1.0, opacity: 1.0)
)
)
自定义 Transition 示例(放大 + 淡入)
extension AnyTransition {
static var scaleAndFade: AnyTransition {
.scale(scale: 0.8).combined(with: .opacity)
}
}
用法
MyView()
.transition(.scaleAndFade)