影响模态背景的SwiftUI动画

时间:2020-09-21 16:19:02

标签: swift swiftui

我在ListView()中有一个带有简单动画的工作表:

        .overlay(
                ZStack{
                Group {
                    Circle()
                        .fill(Color.blue)
                        .opacity(animatingButton ? 0.2 : 0)
                        .frame(width: 68, height: 68, alignment: .center)
                        .scaleEffect(animatingButton ? 1 : 0)
                    
                    Circle()
                        .fill(Color.blue)
                        .opacity(animatingButton ? 0.15 : 0)
                        .frame(width: 88, height: 88, alignment: .center)
                        .scaleEffect(animatingButton ? 1 : 0)
                }
                .animation(Animation.easeInOut(duration: 2.0).repeatForever(autoreverses: true))

导致圈子不断扩大和缩小。

在模态中,我有一个TabView并正在设置背景图像集,如下所示:

TabView(selection: $VM.modalSelectedPage){
ListView()
    .background(Image(VM.backgroundImage)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .edgesIgnoringSafeArea(.all)) 

....

}

问题是,如果我注释掉,当从模态底部向上拖动时,此动画会导致不良行为

  .animation(Animation.easeInOut(duration: 2.0).repeatForever(autoreverses: true))

问题消失了。

我尝试添加

.animation(nil) 

到.background无效。

在这里您可以看到问题:https://imgur.com/E8S01kd

在这里您可以看到它在没有动画的情况下工作:https://imgur.com/fjI0Aiz

简单的代码即可复制错误

ModalView:

import SwiftUI

struct ModalView: View {

var body: some View {
    
        
        HStack{
            Text("")
                .animation(.default) // Comment out to fix issue
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.green)                                                             
        .edgesIgnoringSafeArea(.all)
    }
}

ContentView:

import SwiftUI

    struct ContentView: View {
    
        @State private var showingModal = false
    
        var body: some View {
            Button(action: {
            self.showingModal.toggle()   
        }, label: {
            Text("Open Modal")
        })
        .sheet(isPresented: $showingModal, content: {
            ModalView()
        }) 
    }
}

0 个答案:

没有答案