I am building a card game (Set) and when dealing the cards I am currently using
Once I find the position of the button I intend to use .offset to have them 'fly' out. Is there a better way?
I know it is possible using geometry reader, but I have not found out how to do so.
Here is my current code:
[Here](https://www.icloud.com/iclouddrive/0rJS9eRGgicAcpumvfJiTjd7Q#RPReplay_Final1593385736
https://www.icloud.com/iclouddrive/0rJS9eRGgicAcpumvfJiTjd7Q#RPReplay_Final1593385736) is a video depicting how the animation currently works.
I want the cards to all 'fly out' from the deal button.
Code Block withAnimation{} and .transition(.move(edge: .bottom)
to have the cards animate from the bottom edge of the screen when the user taps the deal button. I want to make it so that the cards 'fly out' of the button and was wondering how I find the location of the button. Once I find the position of the button I intend to use .offset to have them 'fly' out. Is there a better way?
I know it is possible using geometry reader, but I have not found out how to do so.
Here is my current code:
Code Block struct SetGameView: View { @ObservedObject var viewModel: SetViewModel = SetViewModel() var location: (CGFloat, CGFloat) = (0.0, 0.0) var body: some View { VStack { HStack { Label("Score: \(viewModel.score)", systemImage: "face.dashed").font(.title).padding(.leading) Spacer() } Grid(viewModel.dealtCards) { card in CardView(card: card) .transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .leading))) .padding() .onTapGesture { withAnimation { viewModel.choose(card) } } } .onAppear { withAnimation(.easeInOut) { deal(12) } } Divider() HStack { CreateNewGameButton(viewModel: viewModel) DealNewCardbutton(viewModel: viewModel, deal: deal) }.padding(.horizontal).frame(maxHeight: 50) } } struct DealNewCardbutton: View { var viewModel: SetViewModel let deal: (Int) -> Void init(viewModel: SetViewModel, deal: @escaping (Int) -> Void) { self.viewModel = viewModel self.deal = deal } var body: some View { GeometryReader { geo in Button(action: { deal(3) }){ ZStack { RoundedRectangle(cornerRadius: 10.0).foregroundColor(.blue) Text("Deal Three Cards").foregroundColor(.white) } }.onAppear { print(geo.frame(in: .global).midX, geo.frame(in: .global).midY) } } } }
[Here](https://www.icloud.com/iclouddrive/0rJS9eRGgicAcpumvfJiTjd7Q#RPReplay_Final1593385736
https://www.icloud.com/iclouddrive/0rJS9eRGgicAcpumvfJiTjd7Q#RPReplay_Final1593385736) is a video depicting how the animation currently works.
I want the cards to all 'fly out' from the deal button.