Animation between views of a tabView

App Development
1

I have a small problem I am trying to solve and it’s been 2 hours and unfortunately didn’t do it. so this how it looks:
Simulator Screen Recording - iPhone 13 Pro - 2023-08-14 at 16.38.06

and this is the code:

struct Toolbar: View {
    
    var body: some View {
        TabView {
                VStack {
                    Circle()
                       .foregroundColor(.yellow)
                       .frame(width: 500)
                       .offset(x: -100 ,y:-500)
                }
            .tabItem {
                Label("home 1", systemImage: "house")
            }
            
            VStack {
                    Circle()
                       .foregroundColor(.yellow)
                       .frame(width: 500)
                       .offset(x: 0 ,y:-500)
                 }
            .tabItem {
                Label("home 2", systemImage: "house")
            }
       }
  
   }
    
}

What I am trying to do is… to add a small animation for the movement of the circle throw views. any idea how can I achieve that ??

2

Two ideas.

  1. Get the circle out of the TabView and put everything in a ZStack. Change the circle’s offset with animation.
  2. If the circle needs to exist in both views in the tabview, use a Transition and make sure the identity of the circle is clear for the system. This one is probably harder, it works with ‘if else’ navigation logic but I don’t know if it also works with a TabView.
3

You might also need to look into matched geometry effects

4

tried it and didn’t work

5

Have you ever worked with transitions, matched geometry effects and all that good stuff ? If it’s your first time, there’s probably more to it than just “tried it and it didn’t work”. In any case, if I were you I’d try my 1st idea before moving on to the big guns in my 2nd.

6

Simulator Screen Recording - iPhone 14 - 2023-08-15 at 19.25.33

I did it, just by using withAnimation with onAppear.