使用matchedGeometryEffect将文本向下移动

Question

代码中有两个

Text()

。第一个是蓝色的，另一个是红色的。我只想将动画从 first Text() 向下移动到 second Text()。现在正在逆转！

我尝试更改 isSource: true/false 但没有运气！

这是代码：

struct AnimDown: View {
    
    @State private var textAnim = "2344"
    @State private var counter = 0
    @Namespace private var ns1

    var body: some View {

        VStack {
            
            Text(textAnim)
                .matchedGeometryEffect(id: counter, in: ns1, isSource: true)
                .foregroundColor(.blue)
                .animation(.easeInOut, value: counter)
          
            Text(textAnim)
                .matchedGeometryEffect(id: counter, in: ns1, isSource: false)
                .foregroundColor(.red)
                .animation(.easeInOut, value: counter)
          
            
            Button("Move Down") {
                textAnim = String("\(Int.random(in: 1..<99))")
                counter += 1
            }
        }
    }
}

Answer 1

具有

View

的

isSource: false

正在从其初始位置（位于

VStack

的中间）移动到具有

isSource: true

的视图所标识的位置。这就是它上升的原因。

非源视图可以放在后台，因为它不需要在布局中分配空间。通过使用

alignment: top

，它从背景顶部开始。因此，通过向源视图添加一些顶部填充，它现在向下移动：

VStack(spacing: 20) {

    Text(textAnim)
        .matchedGeometryEffect(id: counter, in: ns1, isSource: true)
        .foregroundColor(.blue)
        .animation(.easeInOut, value: counter)
        .padding(.top, 50)

    Button("Move Down") {
        textAnim = String("\(Int.random(in: 1..<99))")
        counter += 1
    }
}
.background(alignment: .top) {
    Text(textAnim)
        .matchedGeometryEffect(id: counter, in: ns1, isSource: false)
        .foregroundColor(.red)
        .animation(.easeInOut, value: counter)
}