-
使用withAnimation和@State屬性顯示新的View 以及移除新的View 來達(dá)到跳轉(zhuǎn)和返回的效果
.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),//這里控制視圖進(jìn)入的方向
removal: .move(edge: .leading)//這里控制視圖退出的方向
))
.zIndex(1) // 確保它在上面 ***這個是重點(diǎn)如果沒有實(shí)現(xiàn)這個代碼點(diǎn)擊返回的時候就不會觸發(fā) removal: .move(edge: .leading)動畫效果
}
}
}
}
struct SlideInView: View {
@Binding var showStack: Bool
var body: some View {
VStack {
Spacer()
Text("我是滑入的視圖")
.font(.title)
.padding()
Button("關(guān)閉") {
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. 旋轉(zhuǎn)加縮放(組合):.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)