SwiftUI 如何通过.transition(.slide)实现数值变化滑动过渡动画

你没办法直接用.transition(.slide)实现目标效果，原因是默认状态下Text是同一个视图实例，数值更新时SwiftUI只会刷新它的内容，不会触发视图插入/移除的过渡逻辑。你需要给Text绑定和count关联的唯一标识，让SwiftUI在count变化时把旧Text判定为要移除的视图、新Text判定为要插入的视图，才能触发滑动过渡。

修改后的可运行代码如下：

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        VStack(spacing: 64) {
            Text(viewModel.count.description)
                .font(.largeTitle)
                // 绑定id让SwiftUI识别为不同视图
                .id(viewModel.count)
                // 添加滑动过渡
                .transition(.slide)
            Button("递增", action: viewModel.increment)
        }
        // 给整个容器加动画修饰符，让过渡生效
        .animation(.default, value: viewModel.count)
    }
}

final class ViewModel: ObservableObject {
    @Published var count = 0

    func increment() {
        count += 1
    }
}

如果需要完全匹配你要求的旧数值左滑消失、新数值右滑出现的效果，也可以自定义更精准的过渡：

extension AnyTransition {
    static var customSlideReplace: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .trailing),
            removal: .move(edge: .leading)
        )
    }
}

把上文代码里的.transition(.slide)替换为.transition(.customSlideReplace)即可。

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