Появляется неожиданная анимация SwiftUI

#ios #swift #animation #swiftui

#iOS #быстрый #Анимация #свифтуи

Вопрос:

Я создал обычай TabBar .

Все работает нормально, пока я не вставлю один из видов вкладки в NavigationView , чем анимация появления результата View из самого верхнего левого угла в правый угол (экран с текстом и желтым цветом):

введите описание изображения здесь

Как выполняется панель вкладок: в основном 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 этот эффект, он также будет удален. Итак, мой вопрос заключается в следующем: почему у меня возникает эта неожиданная анимация? что сделано не так?

Комментарии:

1. Вам нужно ограничить анимацию соответствующими состояниями, но я не могу сказать, где, потому что предоставленный код не поддается проверке. Не могли бы вы подготовить минимальный воспроизводимый пример проблемы?

2. @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 !!
        }
    }
}
 

Комментарии:

1. в этом случае весь вид не будет иметь никакой анимации ни в одном компоненте внутри … например, если я добавлю какой-нибудь пользовательский элемент (например, поворот фигуры) — тогда с этим модификатором он будет просто «переходить» из состояния в состояние вместо «анимировать»

2. похоже, проблема в том, что из-за чего-то NavigationLink пытается анимировать содержимое с нулевого размера до ожидаемого (даже если я изначально установил постоянный размер)

3. В итоге я заменил GeometryReader в комбинации стеков, проблема с неожиданной анимацией исчезла.