【问题标题】:SwiftUI unexpected animation on appear出现 SwiftUI 意外动画
【发布时间】:2020-12-04 17:29:19
【问题描述】:

我创建了自定义TabBar。

一切正常,直到我将选项卡的一个视图嵌入到 NavigationView 中,结果 - View 从左上角到右上角的外观动画(带有文本和黄色的屏幕):

tabBar是怎么做的:基本上View的body是使用GeometryReaderVStack/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,这个效果也会被删除。所以我的问题是 - 为什么我会有这个意想不到的动画?做错了什么?

【问题讨论】:

标签: ios swift animation swiftui


【解决方案1】:

这里是修复(用 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 !!
        }
    }
}

【讨论】:

  • 在这种情况下,整个视图内部的任何组件都不会有任何动画......例如,如果我放置了一些自定义元素(如形状的旋转) - 与这个修饰符相比,它将只是“从一个状态跳到另一个状态,而不是“动画”
  • 看起来问题在于 NavigationLink 尝试将内容从 .zero 大小设置为预期的动画(即使我最初设置了恒定大小)
  • 我最终在 Stacks 组合中替换了 GeometryReader,意外动画问题消失了。
猜你喜欢
  • 1970-01-01
  • 2022-01-19
  • 2021-08-13
  • 1970-01-01
  • 2021-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多