在 SwiftUI 中重新创建 twitter 复制到剪贴板的动画

Question

在 Twitter 应用程序中，当您点击共享按钮，然后点击复制链接按钮时，显示“已复制到剪贴板”的视图将从顶部移入屏幕。它在屏幕顶部停留约 1 秒钟，然后移回到屏幕上并消失。像这样：

我的目标是每当我双击文本视图时在我的 SwiftUI 应用程序中创建相同的效果。但我就是不知道如何实现这种效果。这是我能得到的最好的：

import SwiftUI

struct ContentView: View {
    @State private var copied = false
    var body: some View {
        GeometryReader { gr in
            ZStack {
                if copied {
                    Text("Copied to clipboard")
                        .padding()
                        .background(Color.blue.cornerRadius(20))
                        .position(x: gr.frame(in: .local).midX)
                        .transition(.move(edge: .top))
                        .animation(Animation.easeInOut(duration: 2).repeatCount(2))
                }
                
                VStack {
                    Text("Copy")
                        .onTapGesture(count: 2) {
                            self.copied.toggle()
                        }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

Answer 1

struct ContentView: View {
    @State private var copied = false {
        didSet {
            if copied == true {
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation {
                        copied = false
                    }
                }
            }
        }
    }
    var body: some View {
        GeometryReader { geo in
            ZStack {
                if copied {
                    Text("Copied to clipboard")
                        .padding()
                        .background(Color.blue.cornerRadius(20))
                        .position(x: geo.frame(in: .local).width/2)
                        .transition(.move(edge: .top))
                        .padding(.top)
                        .animation(Animation.easeInOut(duration: 1))
                }
                
                VStack {
                    Text("Copy")
                        .onTapGesture(count: 2) {
                            withAnimation {
                                copied = true
                        }
                    }
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

结果：