分段控制动画

Question

我有两个不同的视图，想在分段控制器更改时用动画显示它们。我尝试过使用 WithAnimation，但它并没有改变结果。

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)}
            }

Answer 1

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))
                }
            }

分段控制动画

Segmented Control Animation

uisegmentedcontrol

swiftui