在 SwiftUI 中对字体大小进行动画处理

Question

现在 SwiftUI 中的字体大小似乎可以设置动画了。然而，当我为它设置动画时，我得到了一个奇怪的反弹效果：不仅字体大小被动画化，而且文本的位置也被动画化（我从未改变过）。这里出了什么问题，我该如何解决这个问题？

struct ContentView: View {
    @State var big = false
    
    var body: some View {
        Button {
            big.toggle()
        } label: {
            Text("Hello, world!")
                .font(.system(size: big ? 100 : 20, weight: .bold))
                .animation(.spring(duration: 2, bounce: 0), value: big)
        }
    }
}

为了更好地了解发生的情况，我在

Text

视图中添加了黄色背景。奇怪的是，背景按照预期移动：它按照我的预期从中心放大。然而，里面的文本似乎分别锚定在左上角或右下角，我不明白为什么要这样做。

我还尝试使用自定义的可动画字体修改器，如here中的建议。这稍微好一些，但也有类似的问题。 （但奇怪的是，它似乎不是确定性的：有时它的动画正确，有时则不然。）

Answer 1

如果您切换标志

withAnimation

而不是使用

.animation

那么它的效果会稍微好一些，就像您的上一个示例一样。要将其完全整合在一起，请添加

.drawingGroup()

:

Button {
    withAnimation(.spring(duration: 2, bounce: 0)) {
        big.toggle()
    }
} label: {
    Text("Hello, world!")
        .background(.yellow)
        .font(.system(size: big ? 100 : 20, weight: .bold))
        .drawingGroup()
}