跳到主要内容

SwiftUI数字变化动画：iOS 17新功能教程

· 阅读需 2 分钟
GoSwiftUI
GoSwiftUI
goswiftui.com

iOS 17 带来了 SwiftUI 中一种新的方式来实现漂亮的数字动画。让我们学习如何做到这一点。

在 iOS 17 之前，如果你尝试在 SwiftUI 中实现数字动画，你将得到一个简单的淡入/淡出动画。

struct ContentView: View {
    @State private var number: Int = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("\(number)")

            Button {
                withAnimation {
                    number = .random(in: 0 ..< 200)
                }
            } label: {
                Text("随机")
            }
        }
        .font(.largeTitle)
    }
}

这是你会得到的：一个淡入淡出的动画。

在iOS 16中实现数字变化动画。在 iOS 16 中实现数字变化动画。

在 iOS 17 中如何实现数字变化动画​

在 iOS 17 中，SwiftUI 提供了一种内置的方法来实现数字动画。

效果如下图所示。

在iOS 17中实现数字变化动画。在 iOS 17 中实现数字变化动画。

要在 iOS 17 中实现数字动画，我们在文本视图上应用.contentTransition(.numericText())即可。

struct ContentView: View {
    @State private var number: Int = 0

    var body: some View {
        VStack(spacing: 20) {
            // 1
            Text("\(number)")
                .contentTransition(.numericText())
            Button {
                withAnimation {
                    number = .random(in: 0 ..< 200)
                }
            } label: {
                Text("随机")
            }
        }
        .font(.largeTitle)
    }
}

要享受这个美丽的动画，我们需要做的唯一一件事就是使用.contentTransition修饰符并使用numericText()过渡。