跳到主要内容

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

· 阅读需 2 分钟
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()过渡。