swiftUI 中从小到大的文本动画

Question

两个

Text()

之间的动画对于相同的文本大小效果很好。从大文本到小文本尺寸也适用于

.minimumScaleFactor(0.1)

。

但是我怎样才能制作动画从小到大的文本尺寸？

这是我的代码：

struct AnimView: View {
    @State private var textAnim = "23"
    @State private var matched = true
    @Namespace private var ns1

    var body: some View {
        VStack {
              
            Text(textAnim)
                .matchedGeometryEffect(id: matched ? "text" : "temp",in: ns1,isSource: !matched)
                .font(.system(size: 16))
                .foregroundColor(.blue)
                .minimumScaleFactor(0.1)
            
            Spacer()
                .frame(height: 50)
            
            Text(textAnim)
                .matchedGeometryEffect(id: "text", in: ns1, isSource: true)
                .font(.system(size: 36))
                .foregroundColor(.red)

            
            Button("Move Down") {
                withAnimation(nil) {
                    textAnim = String("\(Int.random(in: 1..<99))")
                    matched = false
                }
                withAnimation {
                    matched = true
                }
            }
        }
    }
}

Answer 1

struct AnimView: View {
@State private var textAnim = "23"
@State private var matched = true
@Namespace private var ns1

var body: some View {
    VStack {
        if matched {
            Text(textAnim)
                .matchedGeometryEffect(id: matched ? "text" : "temp", in: ns1, isSource: !matched)
                .font(.system(size: 16))
                .foregroundColor(.blue)
                .minimumScaleFactor(0.1)
                .transition(.opacity) // Add transition for smoother animation
        } else {
            Text(textAnim)
                .matchedGeometryEffect(id: "text", in: ns1, isSource: true)
                .font(.system(size: 36))
                .foregroundColor(.red)
                .transition(.opacity) // Add transition for smoother animation
        }
        
        Spacer()
            .frame(height: 50)
        
        Button("Move Down") {
            withAnimation {
                textAnim = String("\(Int.random(in: 1..<99))")
                matched.toggle() // Toggle matched state directly for better animation
            }
        }
    }
}

}

看看这是否有效