SwiftUI

Question

我是 SwiftUI 的新手，通过一些示例项目来掌握它的窍门，但我一直在限制我为 AnimationModifier .transition 设置的动画范围，所以它仅影响过渡动画，不影响视图中的其他任何内容。

虽然 onAppear() 和另一个 onDisappear() 尊重单独的转换。 AnimatableModifier 中的动画覆盖了从网格中移除项目，即使在明确声明时也是如此

我已经尝试在 AnimatableModifier 和 GameView 中的 CardView 中明确地将动画设置为 .offset 转换，当我这样做时，根本没有触发任何动画：

.transition(AnyTransition.offset(CGSize.init(width: randomXLocation, height: -offset.height-50)).animation(Animation.easeInOut(duration: 1.25).delay(delay)))

因此，必须有一种方法来限制范围或在动画修改器中明确声明过渡动画或两个单独的动画，但我没有找到任何关于如何继续前进的资源。

GameView.swift

struct GameView: View {
    @ObservedObject var viewModel: SetGameViewModel
    @State var delay: Double = 0.1
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Grid(newItems: self.viewModel.newCards,
                    items: self.viewModel.cards.itemsAtWithIds(ids: self.viewModel.idOfCardsToDisplay)) { card in
                        CardView(card: card, bodyGeoProxy: geometry, delay: self.delay).onTapGesture {
                            self.viewModel.choose(card: card)
                            }
                    .transition(AnyTransition.offset(CGSize.init(width: randomXLocation, height: -offset.height-50)))
                    .animation(Animation.easeInOut(duration: 1.25).delay(delay))
                        .onAppear() {
                            let maxDelay: Double = Double(self.viewModel.cards.itemsAtWithIds(ids: self.viewModel.idOfCardsToDisplay).count)*0.2 + 0.2
                            if self.delay < 2.5 {
                                self.delay = self.delay + 0.2
                            } else if self.delay >= maxDelay {
                                self.delay = 0.1
                            }
                        }
                    
                }
                
                HStack{
                    Button(action: {
                        self.viewModel.dealThreeCards()
                    }) {
                        Text("Hit Me")
                    }
                    Spacer()
                    Text("Score: \(self.viewModel.score)")
                    Spacer()
                    Button(action: {
                        self.viewModel.dealThreeCards()
                    }) {
                        Text("New Game")
                    }
                }
            }
        }
        
        
        
        
        
    }
}

GameView.swift

struct CardView: View{
    var card: SetGame<SoloSetCardContent>.Card
    var bodyGeoProxy: GeometryProxy
    var delay: Double
    
    var body: some View {
        GeometryReader { geometry in
            self.body(for: geometry)
        }
        
    }
    
    init(card: SetGame<SoloSetCardContent>.Card, bodyGeoProxy: GeometryProxy, delay: Double) {
        self.card = card
        self.bodyGeoProxy = bodyGeoProxy
        self.delay = delay
    }
    
    
    @ViewBuilder
    func body(for geometryProxy: GeometryProxy) -> some View {
        
            ZStack {
                if card.isSelected {
                    RoundedRectangle(cornerRadius: 5)
                        .fill(Color.gray)
                        .frame(width: geometryProxy.size.width-4, height: geometryProxy.size.height-4, alignment: .center)
                        .border(Color.blue, width: 2)
                        .animation(nil)
                } else {
                    RoundedRectangle(cornerRadius: 5)
                        .fill(Color.gray)
                        .frame(width: geometryProxy.size.width-4, height: geometryProxy.size.height-4, alignment: .center)
                        .border(Color.red, width: 2)
                        .animation(nil)
                }
                VStack {
                    ForEach(0..<self.card.content.deckShapes.count) { index in
                        VStack {
                            Spacer(minLength: 5)
                            ShapeView(setShape: self.card.content.deckShapes[index])
                                .frame(width: (geometryProxy.size.width-geometryProxy.size.width/5), height: geometryProxy.size.height/5, alignment: .center)
                            Spacer(minLength: 5)
                        }
                    }
                }
            }
            .deal(delay: self.delay, offset: bodyGeoProxy.size)
        }
}

Dealer.Swift - AnimatableModifier

struct Dealer: AnimatableModifier {
    
    
    @State var show: Bool = false
    var delay: Double
    var offset: CGSize
    var randomXLocation: CGFloat {
        CGFloat.random(in: -offset.width ..< offset.width)
    }
    
    func body(content: Content) -> some View {
        ZStack {
            if show {
                content
                    .transition(AnyTransition.offset(CGSize.init(width: randomXLocation, height: -offset.height-450)))
                    .animation(Animation.easeInOut(duration: 1.25).delay(delay))
                    
            }
        }
            
        .onAppear {
            withAnimation {
                self.show = true
            }
        }
        .onDisappear {
            withAnimation {
                self.show = false
            }
        }

    }

}

extension View {
    func deal(delay: Double, offset: CGSize) -> some View {
        self.modifier(Dealer(delay: delay, offset: offset))
    }
}

Answer 1

我能够通过从正文内容（和其他地方）中删除动画并添加到 AnimationModifier body 函数中 .onAppear 方法的 withAnimation 部分来解决这个问题

func body(content: Content) -> some View {
        ZStack {
            if show {
                content
                    .transition(.asymmetric(insertion: .offset(CGSize.init(width: randomXLocation, height: -offset.height-50)),
                                            removal: .offset(CGSize.init(width: randomXLocation, height: offset.height+50))))
            }
        }
        .onDisappear {
            withAnimation (Animation.easeInOut(duration: 1.25).delay(0))  {
                self.show = false
            }
        }
        .onAppear {
            withAnimation (Animation.easeInOut(duration: 1.25).delay(self.delay)) {
                self.show = true
            }
        }
    }

SwiftUI - 如何将动画范围限制为仅 onAppear 转换

SwiftUI - How to limit the scope of animation to only the onAppear Transition

swift

cocoa-touch

swiftui-animation