父视图上的过渡覆盖子视图中的动画按钮

问题描述

我将以下视图放置在按钮标签内：

struct ButtonLoading: View {
    @Binding var isAnimating: Bool
    
    var body: some View {
        HStack(spacing: 4) {
            CircleView(isAnimating: $isAnimating,idx: 0)
            CircleView(isAnimating: $isAnimating,idx: 1)
            CircleView(isAnimating: $isAnimating,idx: 2)
        }
    }
}

struct CircleView: View {
    @Binding var isAnimating: Bool
    var idx: Int
    
    var body: some View {
        Circle()
            .fill(Color.white)
            .frame(width: 4,height: 4)
            .offset(y: isAnimating ? -4 : 0)
            .animation(Animation.spring(response: 0.6,dampingFraction: 1.0,blendDuration: 1.0)
                        .repeatForever(autoreverses: true)
                        .delay(Double(idx) * 0.25))
    }
}

然后是以下观点：

struct ContentView: View {
    @State var current: String = "one"
    
    var body: some View {
        ZStack {
            Color.red.opacity(0.05).ignoresSafeArea()
            
            vstack {
                if current == "one" {
                    ViewOne()
                        .transition(.move(edge: .leading))
                }
                if current == "two" {
                    ViewTwo()
                        .transition(.move(edge: .trailing))
                }
            }
        }
        .onAppear {
            dispatchQueue.main.asyncAfter(deadline: .Now() + 2) {
                withAnimation {
                    self.current = "two"
                }
            }
        }
    }
}

struct ViewOne: View {
    var body: some View {
        ZStack {
            Color.blue.ignoresSafeArea()
            Text("View One")
                .foregroundColor(.white)
        }
    }
}

struct ViewTwo: View {
    @State var isAnimating = false
    
    var body: some View {
        ZStack {
            Color.white.ignoresSafeArea()
            
            Button(action: {
                isAnimating = true
            }) {
                ZStack(alignment: .center) {
                    ButtonLoading(isAnimating: $isAnimating)
                        .opacity(isAnimating ? 1 : 0)
                    
                    Text("Continue")
                        .foregroundColor(.white)
                        .opacity(isAnimating ? 0 : 1)
                }
                .frame(height: 44)
                .padding(.horizontal,20)
                .background(Color.blue)
            }
        }
    }
}

当我点击按钮时，预期的行为是看到按钮的内容更改为省略号加载动画（点反复上下移动）。如果我删除附加到 .transition(.move(edge: .trailing)) 的 ViewTwo，这很好用。但是，在当前状态下，过渡动画似乎破坏了按钮动画。我看到它从后缘进进出出。有任何想法吗？ SwiftUI 快把我逼疯了！

更新：

从一年前找到了另一个答案，多产的 Asperi 做出了贡献。将我的按钮包裹在其中之一确实可以解决问题：

struct HelperView<Content: View> : UIViewControllerRepresentable {
    var content: () -> Content
    
    func makeUIViewController(context: Context) -> UIHostingController<Content> {
        UIHostingController(rootView: content())
    }
    
    func updateUIViewController(_ host: UIHostingController<Content>,context: Context) {
        host.rootView = content() // Update content
    }
}

这是解决这个问题的唯一方法吗？

更新 2

切换到不透明度而不是偏移并添加 .animation(nil) 解决了动画继承父过渡的问题：

struct CircleView: View {
    @Binding var isAnimating: Bool
    var idx: Int
    
    var body: some View {
        Circle()
            .fill(Color.white)
            .frame(width: 4,height: 4)
            .animation(nil)
            .opacity(isAnimating: 0 : 1)
            .animation(Animation.spring(response: 0.6,blendDuration: 1.0)
                        .repeatForever(autoreverses: true)
                        .delay(Double(idx) * 0.25))
    }
}

但是，添加自定义 GeometryEffect 来更改偏移量不起作用。此外，添加带有和不带有 .transition(.identity) 的 .animation(nil) 也不起作用。在这里尝试一切。 =)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）