SwiftUI实时切换不对称转场动画失效问题求助

我想要实现类似示例动图的选择器效果，但切换浏览方向后，即便设置了新的AnyTransition.asymmetric不对称转场，视图消失时还是会用旧的转场效果（比如首尾切换时的异常表现）。以下是相关代码，求解决方法？

@State var translations:[String] = ["未知"]
@State var index = 0
@State var transition:AnyTransition = .asymmetric(insertion: .move(edge: .trailing), removal:.move(edge: .leading)).combined(with: .opacity)
@State var disabled = false // 补全原代码缺失的状态
var transTexts:some View{
        HStack{
            if(translations.count > 1){
                Button {
                    if(index > 0){
                        transition = .asymmetric(insertion: .move(edge: .leading), removal:.move(edge: .trailing)).combined(with: .opacity)
                        disabled.toggle()
                        index -= 1
                    }
                } label: {
                    Image(systemName:"arrowtriangle.backward.circle.fill")
                }
                .disabled(index == 0)
                Text(translations[index])
                    .scroll()
                    .font(.body)
                    .id(index)
                    .disabled(disabled)
                    .transition(transition)
            }
            Spacer()
            if(translations.count  > 1){
                Button {
                    if(index < translations.count-1){
                        transition = .asymmetric(insertion: .move(edge: .trailing), removal:.move(edge: .leading)).combined(with: .opacity)
                        disabled.toggle()
                        index += 1
                    }
                } label: {
                    Image(systemName:"arrowtriangle.forward.circle.fill")
                }
                .disabled(index == translations.count - 1)
            }
        }
        .animation(.default,value: index)
}

问题根源 #

问题出在转场设置时机不对：你先修改transition变量，再改变index触发动画，但SwiftUI中，旧视图的移除转场是基于它被移除前的transition值，新设置的转场只对新插入的视图生效，导致移除动画仍沿用旧规则。

修复方案 #

不用单独维护transition状态，而是根据切换方向动态计算转场，让视图在动画触发时直接拿到正确的转场规则：

1. 新增状态变量标记切换方向
2. 移除冗余的transition变量，动态生成对应方向的不对称转场
3. 点击按钮时先标记方向，再修改索引触发动画

修改后的代码：

@State var translations:[String] = ["未知", "测试文本1", "测试文本2", "测试文本3"]
@State var index = 0
@State var isForward = true // 标记当前切换方向：true=向前，false=向后
@State var disabled = false

var transTexts:some View{
    HStack{
        if translations.count > 1 {
            Button {
                guard index > 0 else { return }
                isForward = false
                disabled.toggle()
                index -= 1
            } label: {
                Image(systemName:"arrowtriangle.backward.circle.fill")
            }
            .disabled(index == 0)
        }
        
        Text(translations[index])
            .scroll()
            .font(.body)
            .id(index)
            .disabled(disabled)
            // 根据方向动态生成转场
            .transition(.asymmetric(
                insertion: isForward ? .move(edge: .trailing) : .move(edge: .leading),
                removal: isForward ? .move(edge: .leading) : .move(edge: .trailing)
            ).combined(with: .opacity))
        
        Spacer()
        
        if translations.count > 1 {
            Button {
                guard index < translations.count - 1 else { return }
                isForward = true
                disabled.toggle()
                index += 1
            } label: {
                Image(systemName:"arrowtriangle.forward.circle.fill")
            }
            .disabled(index == translations.count - 1)
        }
    }
    .animation(.default, value: index)
}

关键说明 #

• 动态转场：每次触发动画时，视图都会根据当前方向拿到正确的插入/移除规则，旧视图的移除动画会匹配对应方向，不会残留旧效果
• 状态顺序：先标记方向再修改索引，确保动画触发时转场规则已经正确设置
• 减少冗余：移除单独维护的transition变量，避免状态不同步问题

内容的提问来源于stack exchange，提问作者Perry Wang