swiftuiuisegmentedcontrol

Segmented Control Animation

I have two different views and want to show them with animation when the segmented controller is changed. I have tried with WithAnimation but it did not change the outcome.

var body: some View {
    ZStack {
        VStack {
            Picker("Addresses", selection: $selectorIndex) {
                ForEach(0..<options.count) { index in
                    Text(self.options[index]).tag(index)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            .frame(width: 216, height: 28, alignment: .center)
            .cornerRadius(5)
            .foregroundColor(.white)
            Spacer()
            
            if selectorIndex == 0 {
                withAnimation(Animation.easeInOut(duration: 1.0).repeatForever()){
                    PersonalAddressView(personalAddress: personalAddress)}
            } else {
                withAnimation(Animation.easeInOut(duration: 1.0).repeatForever()){
                    CorporateAddressView(corporateAddress: corporateAddress)}
            }

enter image description here enter image description here

Solution 
  • var body: some View {
    ZStack {
        VStack {
            Picker(selection: Binding<Int>(
                            get: { self.authPath ?? 0 },
                            set: { tag in
                                withAnimation { // needed explicit for transitions
                                    self.authPath = tag
                                }
                            }),
                               label: Text("Authentication Path")) {
                Text(self.options[0]).tag(0)
                Text(self.options[1]).tag(1)
                        }
            .pickerStyle(SegmentedPickerStyle())
            .frame(width: 216, height: 28, alignment: .center)
            .cornerRadius(5)
            .foregroundColor(.white)
            Spacer()
            
            ZStack {
                Rectangle().fill(Color.clear)
                if nil == authPath {
                    PersonalAddressView(personalAddress: personalAddress)
                }
                if authPath == 0 {
                        PersonalAddressView(personalAddress: personalAddress)
                        .transition(.move(edge: .leading))
                } else if authPath == 1 {
                        CorporateAddressView(corporateAddress: corporateAddress)
                        .transition(.move(edge: .trailing))
                }
            }