如何在SwiftUI中从文本字段创建动画到列表行？

Question

例如，iMessage如何在发送消息时进行动画处理，从textField过渡到其上方的tableview / collectionview单元。

https://www.youtube.com/watch?v=gfAPip-QtTc

您可以在2.57上看到

Answer 1

使用偏移量和不透明度可以模拟过渡。我写了一个非常简单的例子：

import SwiftUI

struct ContentView: View {

    @State var textIn: String = ""
    @State var send: Bool = false

    var body: some View {

        VStack{
            ZStack{

                TextField("enter text", text: $textIn)
                    .multilineTextAlignment(.center)
                    .foregroundColor(Color.white)

                Text("\(textIn)")
                    .padding(2)
                    .foregroundColor(Color.white)
                    .background(Color.blue)
                    .cornerRadius(8)
                    .offset(y: send == true ? -100 : 0)
                    .opacity( send == true ? 1.0 : 0.0)
                    .animation(Animation.easeInOut)
            }

            Button( action: { withAnimation { self.send.toggle() } } ) {
                Text("send Text")

            }.padding(.top, 50)

        }.background(Color.black)

    }
}