SwiftUI转换(.asymmetric..)不使用偏移

Question

我正在做一个套装游戏，我想通过.transition(.asymmetric(插入：.offset(x: 100.0，y: 100.0)，删除：.offset(x: 100.0，y: 100.0))命令让卡片在视图上(从屏幕外)摆动。

实际上，卡片通过精确的偏移量离开屏幕，但它们只是在程序的开始处“出现”，而不是真正离开屏幕。

Video of the App

正如你可以看到的选择和“匹配”的卡片飞出屏幕与.transition(偏移量)。我希望看到卡片在游戏开始时以同样的方式从屏幕之外飞进来。

@ViewBuilder
private func body (for size: CGSize) -> some View{
    let paddingAllSidesInCards:CGFloat = 8
    if card.isFaceUp || !card.isMatched
    {
        GeometryReader { geo in
            VStack(alignment: .center) {
                Group
                {
                        
                        ForEach( 0..<card.numberofsymbols)
                        { numberofcards in
                            
                            let cardshape = cardViewModelShape.getShape(Card: card, size: size, numberOfCards: card.numberofsymbols)
                                cardshape
                                .transition(.identity)
                                .aspectRatio(1,contentMode: .fit)
                                .frame(minWidth: 20, idealWidth: 100, maxWidth: .infinity, minHeight: 20, idealHeight: 100, maxHeight: .infinity, alignment: .center)
                                .scaleEffect(card.isSelected ? 1.2 : 1)
                                .animation(.spring(response: (card.isSelected ? 1:0), dampingFraction: 0.1, blendDuration: .infinity))
                        }.padding(paddingAllSidesInCards)
                    //Implicit animation - with linear execution
                }
            }
            .cardify(isFaceUp: card.isFaceUp)
        }
        .transition(.asymmetric(insertion: .offset(x: 100.0, y: 100.0), removal: .offset(x: 100.0, y: 100.0)))
   

    }
}

我做错了什么或忘记了一点--我尝试了onAppear()运算符，但它不起作用。

谢谢你的帮忙!

PS:如果您想查看完整的源代码，可以查看存储库：

Link SetGame Repo

Answer 1

提供的代码是不可测试的，所以只是一个想法-尝试将所有内容包装到容器中(需要它作为动画转换的占位符)，例如

@ViewBuilder
private func body (for size: CGSize) -> some View{
    let paddingAllSidesInCards:CGFloat = 8

    VStack // << this one !!
    {
      if card.isFaceUp || !card.isMatched
      {
        GeometryReader { geo in
            VStack(alignment: .center) {

               // .. other code
            }
            .cardify(isFaceUp: card.isFaceUp)
        }
        .transition(.asymmetric(insertion: .offset(x: 100.0, y: 100.0), removal: .offset(x: 100.0, y: 100.0)))
      }
   }
   .animation(.default) // << use any you want
}

Answer 2

像往常一样，解决方案就在附近--我把我的动画和过渡放在了错误的地方-->我试着把它放在每个单独的卡片上，但实际上，我想让每一张卡片同时在视图中滑动。

有不同的方法可以做到这一点，我决定使用状态和动画偏移，以便卡滑动到视图中。

struct SetGameView: View {
@ObservedObject var viewModel: SetGameViewModel
@State private var offset = 1000
//var card: SetGameModel<String>.Card
var body: some View {
    VStack()
    {
        Grid(viewModel.cards) { card in
            Cardview(cardViewModelShape: viewModel, card: card).onTapGesture
            {
                withAnimation(.linear(duration: self.AnimationDuration))
                {
                    self.viewModel.choose(card: card)
                }
            }
            
        }.offset(x: 0.0, y: CGFloat(offset)) // That's important
}