我创建了自定义
TabBar
。
一切正常,直到我将选项卡的视图之一嵌入到
NavigationView
中,然后结果 - View
从左上角到右上角的外观动画(带有文本和黄色的屏幕):
tabBar 是如何完成的:基本上
View
的主体是使用 GeometryReader
VStack
/Zstack
创建的:
var body: some View {
GeometryReader { geometry in
let height = geometry.size.height
let width = geometry.size.width
let bottomSafeAreaInset = geometry.safeAreaInsets.bottom
let topSafeAreaInset = geometry.safeAreaInsets.top
let verticalSafeAreaInset = bottomSafeAreaInset + topSafeAreaInset
VStack(spacing: 0) {
// content
mainContentBody
.frame(width: width, height: height - heightOfTabBar)
.zIndex(0)
// some calculation ...
// tabBar
Spacer(minLength: 0)
BottomBar(barButtonItems: buttons)
.frame(width: width, height: tabBarHeightWithOffset)
.background(Color.gray)
.offset(y: isMenuShown ? tabBarHeightWithOffset : 0)
.edgesIgnoringSafeArea(.all)
.opacity(isMenuShown ? 0 : 1)
.tabContainerAnimation() // simple wrapper for animation with duration
//... other view in ZStack
// button
ZStack {
overlayButton
}
.offset(y: -initialButtonOffset + additionalOffsetForButton)
.tabContainerAnimation(delay: 0.25)
}
}
}
以及在 tab1 上查看的代码:
struct Tab1View: View {
var body: some View {
NavigationView {
VStack {
Text("sdsd")
Color.orange
}
}
}
}
如果我删除
NavigationView
,此效果也会被删除。所以我的问题是 - 为什么我会有这个意想不到的动画?做错了什么?
这里是修复(使用 Xcode 12.1 / iOS 14.1 测试)
struct Tab1View: View {
var body: some View {
GeometryReader { g in
NavigationView {
VStack {
Text("sdsd")
Color.orange
}
}
.animation(.none) // << this one !!
}
}
}
以前,您可以在视图上使用 .animation(nil) 修饰符来关闭动画。然而,从 iOS 15 开始,这种方法已被弃用。
对于 iOS 15 及更高版本,您应该使用 .transaction 修饰符来禁用特定转换的动画。方法如下:
.transaction {
$0.animation = nil
}