出现 SwiftUI 意外动画

Posted 2023-02-23

【中文标题】出现 SwiftUI 意外动画

【英文标题】：SwiftUI unexpected animation on appear

【发布时间】：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，这个效果也会被删除。所以我的问题是 - 为什么我会有这个意想不到的动画？做错了什么？

【问题讨论】：

你需要将动画限制在相应的状态，但我不能说在哪里，因为提供的代码是不可测试的。你会准备最小的可重现问题示例吗？

@Asperi 这里是完整代码gist.github.com/khorbushko/e8877081a39115f9e06ac4c32258340e（这里太长了，不能发）

【参考方案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，意外动画问题消失了。