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

【问题标题】：How can I animate from textfield to list row In SwiftUI?如何在 SwiftUI 中从文本字段动画到列表行？
【发布时间】：2019-12-18 22:02:12
【问题描述】：

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

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

你可以在这里看到 2.57

【问题讨论】：

标签： swift swiftui swiftui-list

【解决方案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)

    }
}

【讨论】：