在 Twitter 应用程序中,当您点击共享按钮,然后点击复制链接按钮时,显示“ 复制到剪贴板 ”的 View 将从顶部移动到屏幕中。它在屏幕顶部停留大约 1 秒钟,然后它移回屏幕上方并消失。像这样:
我的目标是在我双击 TextView 时在我的 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)
}
}
}
最佳答案
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)
}
}
}
结果:关于ios - 在 SwiftUI 中重新创建 twitter 的复制到剪贴板动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65031408/